Sostituisci e ripristina lo stile CSS: auto o none non funzionano

Vorrei sostituire il seguente stile CSS definito per tutte le tabelle:

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

Ho una tabella specifica con la classe chiamata 'other'.
Infine, la decorazione della tavola dovrebbe apparire come:

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

Quindi ho bisogno di rimuovere 3 proprietà: width, min-widthedisplay

Ho provato a ripristinare con noneo auto, ma non ho aiutato, intendo questi casi:

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

Credo che il motivo per cui la prima serie di proprietà non funzionerà è perché non c'è autovalore per display, quindi la proprietà dovrebbe essere ignorata. In tal caso, inline-tableavrà comunque effetto, e poiché widthnon si applica agli inlineelementi, quell'insieme di proprietà non farà nulla.

La seconda serie di proprietà nasconderà semplicemente la tabella, poiché è quello che display: noneserve.

Prova tableinvece a ripristinarlo su :

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

Modifica: il min-width valore predefinito è 0noauto

"none" non fa ciò che si presume faccia. Per "cancellare" una proprietà CSS, è necessario riportarla al suo valore predefinito, che è definito dallo standard CSS. Quindi dovresti cercare le impostazioni predefinite nel tuo riferimento preferito.

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

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

Prova questo. Funzionerà.

La displayproprietà predefinita per una tabella è display:table;. L'unico altro valore utile è inline-table. Tutti gli altri displayvalori non sono validi per gli elementi della tabella.

Non c'è autoun'opzione per ripristinarlo ai valori predefiniti, anche se se lavori in Javascript, puoi impostarlo su una stringa vuota, il che farà il trucco.

width:auto;è valido, ma non è il valore predefinito. La larghezza predefinita per una tabella è 100%, mentre width:auto;l'elemento occuperà solo la larghezza necessaria.

min-width:auto;non è permesso. Se impostato min-width, deve avere un valore, ma impostarlo su zero è probabilmente buono come ripristinarlo al valore predefinito.

Bene, display: none;non visualizzerà affatto la tabella, prova display: inline-block;con le dichiarazioni di larghezza e larghezza minima che rimangono 'auto'.

Ho finito per usare Javascript per perfezionare tutto.

Il mio violino 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); 
    }
})

Il modo migliore che ho trovato per ripristinare un'impostazione di larghezza minima è:

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

unset è nelle specifiche, ma alcuni browser (IE 10) non lo rispettano, quindi 0 è un buon fallback nella maggior parte dei casi. larghezza minima: 0;