wake-up-neo.com

CSS-Stil überschreiben und zurücksetzen: Auto oder keiner funktioniert nicht

Ich möchte den folgenden CSS-Stil für alle Tabellen überschreiben: 

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

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

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

ich muss also 3 Eigenschaften entfernen: width, min-width und display

Ich habe versucht, mit none oder auto zurückzusetzen, half aber nicht, ich meine diese Fälle:

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

Ich glaube, der Grund, warum der erste Satz von Eigenschaften nicht funktioniert, liegt darin, dass es für auto keinen display-Wert gibt, sodass die Eigenschaft ignoriert werden sollte. In diesem Fall wird inline-table immer noch wirksam und da width nicht auf inline-Elemente zutrifft, werden diese Eigenschaften nichts bewirken. 

Der zweite Satz von Eigenschaften wird die Tabelle einfach ausblenden, da display: none dafür gedacht ist. 

Setzen Sie es stattdessen auf table zurück: 

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

Edit:min-width verwendet standardmäßig 0, nicht auto

170
Yi Jiang

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

table.other {
    width: auto;
    min-width: 0;
    display:table;
}
17
tenfour
Set min-width: inherit /* Reset the min-width */

Versuche dies. Es wird klappen.

9
Martin

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

Es gibt keine auto-Option zum Zurücksetzen auf den Standardwert. Wenn Sie jedoch in Javascript arbeiten, können Sie eine leere Zeichenfolge festlegen, was den Trick bewirkt.

width:auto; ist gültig, jedoch nicht standardmäßig. Die Standardbreite für eine Tabelle ist 100%, wohingegen width:auto; das Element nur so viel Breite beansprucht, wie es erforderlich ist.

min-width:auto; ist nicht erlaubt. Wenn Sie min-width einstellen, muss es einen Wert haben. Die Einstellung auf null ist jedoch wahrscheinlich so gut wie das Zurücksetzen auf den Standardwert.

7
Spudley

Nun, display: none; zeigt die Tabelle überhaupt nicht an, versuchen Sie display: inline-block;, wobei die Deklarationen width und min-width "auto" bleiben.

1
Steven

Der beste Weg, den ich gefunden habe, um eine Min-Breite-Einstellung zurückzusetzen, ist:

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

unset ist in der Spezifikation, aber einige Browser (IE 10) respektieren es nicht, daher ist 0 ein guter Fallback in most cases . min-width: 0;

0
A Morales

Am Ende habe ich Javascript benutzt, 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); 
    }
})
0
User