Zastąp i zresetuj styl CSS: auto lub none nie działają

Chciałbym zastąpić następujące style CSS zdefiniowane dla wszystkich tabel:

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

Mam konkretną tabelę z klasą o nazwie 'other'.
Wreszcie dekoracja stołu powinna wyglądać następująco:

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

więc muszę usunąć 3 właściwości: width, min-widthidisplay

Próbowałem zresetować za pomocą nonelub auto, ale nie pomogło, mam na myśli te przypadki:

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

Uważam, że powodem, dla którego pierwszy zestaw właściwości nie zadziała, jest brak autowartości dla display, więc tę właściwość należy zignorować. W takim przypadku inline-tablenadal będzie obowiązywać, a ponieważ widthnie dotyczy inlineelementów, ten zestaw właściwości nic nie da.

Drugi zestaw właściwości po prostu ukryje tabelę, ponieważ do tego display: nonesłuży.

tableZamiast tego spróbuj zresetować go do :

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

Edycja: min-width domyślnie 0nieauto

„none” nie robi tego, co zakładasz. Aby „wyczyścić” właściwość CSS, musisz przywrócić jej wartość domyślną, która jest zdefiniowana w standardzie CSS. Dlatego powinieneś sprawdzić wartości domyślne w swoim ulubionym źródle.

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

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

Spróbuj tego. To będzie działać.

Domyślną displaywłaściwością tabeli jest display:table;. Jedyną użyteczną wartością jest inline-table. Wszystkie inne displaywartości są nieprawidłowe dla elementów tabeli.

Nie ma autoopcji, aby zresetować go do wartości domyślnych, chociaż jeśli pracujesz w Javascript, możesz ustawić go na pusty ciąg, który załatwi sprawę.

width:auto;jest prawidłowy, ale nie jest wartością domyślną. Domyślna szerokość tabeli to 100%, podczas gdy width:auto;spowoduje, że element zajmie tylko tyle szerokości, ile potrzebuje.

min-width:auto;nie jest dozwolone. Jeśli ustawisz min-width, musi mieć wartość, ale ustawienie jej na zero jest prawdopodobnie tak dobre, jak przywrócenie wartości domyślnej.

Cóż, w display: none;ogóle nie wyświetli tabeli, spróbuj display: inline-block;z deklaracjami width i min-width pozostałymi jako „auto”.

Skończyło się na tym, że użyłem Javascript do udoskonalenia wszystkiego.

Moje skrzypce JS: 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">

CSS:

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

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

}

JS:

$(".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); 
    }
})

Najlepszy sposób, w jaki znalazłem, aby przywrócić ustawienie minimalnej szerokości, to:

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

specyfikacja nie jest ustawiona, ale niektóre przeglądarki (IE 10) tego nie przestrzegają, więc 0 jest dobrym rozwiązaniem w większości przypadków . min-width: 0;