CSS-Stil überschreiben und zurücksetzen: Auto oder keine funktionieren nicht

Ich möchte das folgende für alle Tabellen definierte CSS-Styling überschreiben:

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

Ich habe eine bestimmte Tabelle mit Klasse genannt 'other'.
Schließlich sollte die Tischdekoration so aussehen:

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

Also muss ich 3 Eigenschaften entfernen : width, min-widthunddisplay

Ich habe versucht, mit noneoder zurückzusetzen auto, aber ich habe nicht geholfen, ich meine diese Fälle:

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

Ich glaube, der Grund, warum der erste Satz von Eigenschaften nicht funktioniert, ist, dass es keinen autoWert für gibt display, so dass die Eigenschaft ignoriert werden sollte. In diesem Fall inline-tablewird dies weiterhin wirksam, und da widthdies nicht für inlineElemente gilt, wird dieser Satz von Eigenschaften nichts bewirken .

Mit dem zweiten Satz von Eigenschaften wird die Tabelle einfach ausgeblendet, da dies der Zweck display: noneist.

Versuchen Sie es tablestattdessen zurückzusetzen auf:

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

Bearbeiten: min-width Standardmäßig 0nichtauto

"none" macht nicht das, was Sie vermuten. Um eine CSS-Eigenschaft zu "löschen", müssen Sie sie auf den Standard zurücksetzen, der im CSS-Standard definiert ist. Daher sollten Sie die Standardeinstellungen in Ihrer bevorzugten Referenz nachschlagen.

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

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

Versuche dies. Es wird klappen.

Die Standardeigenschaft displayfür eine Tabelle ist display:table;. Der einzige andere nützliche Wert ist inline-table. Alle anderen displayWerte sind für Tabellenelemente ungültig.

Es gibt keine autoOption zum Zurücksetzen auf die Standardeinstellungen. Wenn Sie jedoch in Javascript arbeiten, können Sie eine leere Zeichenfolge festlegen, die den Trick ausführt.

width:auto;ist gültig, aber nicht die Standardeinstellung. Die Standardbreite für eine Tabelle ist 100%, während width:auto;das Element nur so viel Breite einnimmt, wie es benötigt.

min-width:auto;ist nicht erlaubt. Wenn Sie festlegen min-width, muss es einen Wert haben, aber das Setzen auf Null ist wahrscheinlich so gut wie das Zurücksetzen auf den Standardwert.

Nun, display: none;wird die Tabelle überhaupt nicht angezeigt, versuchen Sie es display: inline-block;mit den Deklarationen width und min-width, die 'auto' bleiben.

Am Ende habe ich Javascript verwendet, um alles zu perfektionieren.

Meine JS-Geige: 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); 
    }
})

Der beste Weg, eine Einstellung für die Mindestbreite zurückzusetzen, ist:

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

Nicht gesetzt ist in der Spezifikation, aber einige Browser (IE 10) respektieren es nicht, so dass 0 in den meisten Fällen ein guter Fallback ist. Mindestbreite: 0;