सीएसएस शैली को ओवरराइड और रीसेट करें: ऑटो या कोई भी काम नहीं करता है

Question

मैं सभी तालिकाओं के लिए परिभाषित सीएसएस स्टाइल के बाद ओवरराइड करना चाहूंगा:

table {
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    }

मेरे पास कक्षा के साथ विशिष्ट तालिका है 'other' ।
अंत में टेबल की सजावट इस तरह दिखनी चाहिए:

table.other {
    font-size: 12px;
}

इसलिए मुझे 3 संपत्तियों को हटाने की आवश्यकता है: width , min-widthऔरdisplay

मैं के साथ रीसेट करने की कोशिश की noneया auto, लेकिन मदद नहीं की, मैं इन मामलों मतलब है:

table.other {
    width: auto;
    min-width: auto;
    display:auto;
}
table.other {
    width: none;
    min-width: none;
    display:none;
}

Answer 1

मेरा मानना ​​है कि इस कारण से कि संपत्तियों का पहला सेट काम नहीं करेगा क्योंकि इसका कोई autoमूल्य नहीं है display, ताकि संपत्ति को नजरअंदाज न किया जाए। उस मामले में, inline-tableअभी भी प्रभावी होगा, और जैसा कि तत्वों पर widthलागू नहीं होता है inline, गुणों का वह सेट कुछ भी नहीं करेगा।

गुणों का दूसरा सेट बस तालिका को छिपाएगा, जैसा कि display: noneइसके लिए है।

tableइसके बजाय इसे रीसेट करने का प्रयास करें :

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

संपादित करें: min-width डिफ़ॉल्ट के लिए 0, नहींauto

Comments

अजीब है, मैं

— फायरबग के

@sergionni ओह हाँ, मैं भूल गया - min-widthका डिफ़ॉल्ट मान है 0- reference.sitepoint.com/css/min-width

— Yi Jiang

मैंने फिर से फायरबग की ओर देखा है, वहाँ भी समस्या है, कि इसमें नेस्टेड टेबल हैं, इसलिए ओवरराइडिंग को सभी पदानुक्रम पर लागू किया जाना चाहिए

— सर्जियोनी

@sergionni आप ऐसा कर सकते हैं कि रीसेटिंग table.other tableगुणों के लिए उपयोग किए जाने वाले चयनकर्ता को जोड़कर

— Yi Jiang

width: autoजब मैं ओवरराइड करना चाहता था width: 100%- थैंक

— मेरेडिथ

Answer 2

"कोई नहीं" वह नहीं करता है जो आप मानते हैं कि यह करता है। सीएसएस संपत्ति को "साफ़" करने के लिए, आपको इसे अपने डिफ़ॉल्ट पर वापस सेट करना होगा, जिसे सीएसएस मानक द्वारा परिभाषित किया गया है। इस प्रकार आपको अपने पसंदीदा संदर्भ में चूक को देखना चाहिए।

table.other {
    width: auto;
    min-width: 0;
    display:table;
}

Answer 3

Set min-width: inherit /* Reset the min-width */

इसे इस्तेमाल करे। यह काम करेगा।

Comments

यह एक स्वीकृत उत्तर होना चाहिए। min-width: 0वही काम नहीं करता है

— v010dya

सही है, लेकिन अगर एक माता-पिता के पास क्या है min-width? आप वास्तविक डिफ़ॉल्ट के बजाय उसे प्राप्त करने जा रहे हैं।

— adi518

Answer 4

displayकिसी तालिका के लिए डिफ़ॉल्ट गुण है display:table;। केवल अन्य उपयोगी मूल्य है inline-table। अन्य सभी displayमान तालिका तत्वों के लिए अमान्य हैं।

autoइसे डिफ़ॉल्ट रूप से रीसेट करने का कोई विकल्प नहीं है , हालांकि यदि आप जावास्क्रिप्ट में काम कर रहे हैं, तो आप इसे एक खाली स्ट्रिंग पर सेट कर सकते हैं, जो कि चाल करेगा।

width:auto;मान्य है, लेकिन डिफ़ॉल्ट नहीं है। किसी तालिका के लिए डिफ़ॉल्ट चौड़ाई है 100%, जबकि width:auto;तत्व केवल उतनी ही चौड़ाई लेगा, जितनी उसे चाहिए।

min-width:auto;अनुमति नहीं है। यदि आप सेट करते हैं min-width, तो इसका मान होना चाहिए, लेकिन इसे शून्य पर सेट करना संभवतः उतना ही अच्छा है जितना कि इसे डिफ़ॉल्ट पर रीसेट करना।

Comments

जेएस के बारे में दिलचस्प विचार। लगता है कि मुझे क्या चाहिए। और मैं पहले CSS के साथ कोशिश करूंगा।

— सर्जियोनी

Answer 5

खैर, display: none;तालिका को बिल्कुल भी प्रदर्शित नहीं करेंगे , display: inline-block;'ऑटो' शेष चौड़ाई और न्यूनतम चौड़ाई घोषणाओं के साथ प्रयास करें ।

Answer 6

मैंने सब कुछ सही करने के लिए जावास्क्रिप्ट का उपयोग करके समाप्त किया।

माई जेएस फिडेल: https://jsfiddle.net/QEpJH/612/

HTML:

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

सीएसएस:

.container {
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

}

जे एस:

$(".container").each(function(){
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH)) { 
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    } else {
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    }
})

Answer 7

सबसे अच्छा तरीका है कि मैं एक मिनट की चौड़ाई की स्थापना वापस मिल गया है:

min-width: 0;
min-width: unset;

unset कल्पना में है, लेकिन कुछ ब्राउज़र (IE 10) इसका सम्मान नहीं करते हैं, इसलिए 0 ज्यादातर मामलों में एक अच्छा कमबैक है । न्यूनतम-चौड़ाई: 0;