CSS-Stil überschreiben und zurücksetzen: auto oder none funktionieren nicht

Möchte ich überschreiben folgenden CSS-styling definiert für alle Tabellen:

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

Habe ich bestimmte Tabelle mit Klasse namens 'other'.
Schließlich Tischdekoration sollte sieht wie folgt aus:

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

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

Ich habe versucht, zurücksetzen, mit none oder auto aber leider nicht helfen, ich meine diese Fälle:

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

InformationsquelleAutor der Frage sergionni | 2011-02-23

159

Ich glaube, der Grund, warum die erste Gruppe von Eigenschaften wird nicht funktionieren, weil es keine auto Wert für displayso dass die Eigenschaft ignoriert werden sollte. In diesem Fall inline-table immer noch wirksam, und als width gelten nicht für inline Elemente, das festlegen der Eigenschaften wird nichts tun.

Den zweiten Satz von Eigenschaften wird einfach ausblenden der Tabelle, wie das ist, was display: none ist.

Versuchen zurücksetzen auf table statt:
```
table.other {
    width: auto;
    min-width: 0;
    display: table;
}
```
Edit: min-width standardmäßig 0nicht auto

InformationsquelleAutor der Antwort Yi Jiang
16

"none" nicht tut, was Sie annehmen, dass es tut. Um "clear" eine CSS-Eigenschaft, müssen Sie die Einstellung wieder auf den Standardwert definiert ist, die von den CSS-standard. So sollten Sie Aussehen, bis Sie die Standardeinstellungen in Ihrem Lieblings-Referenz.
```
table.other {
    width: auto;
    min-width: 0;
    display:table;
}
```
InformationsquelleAutor der Antwort tenfour
8
```
Set min-width: inherit /* Reset the min-width */
```
Versuchen. Wird es funktionieren.

InformationsquelleAutor der Antwort Martin
7

Den Standard - display - Eigenschaft für eine Tabelle ist display:table;. Die einzige andere sinnvolle Wert ist inline-table. Alle anderen display Werte sind ungültig für table-Elemente.

Gibt es nicht eine auto option zum zurücksetzen auf die Standardeinstellungen, wenn Sie arbeiten in Javascript, können Sie Sie auf eine leere Zeichenfolge ist, die den trick tun.

width:auto; gültig ist, aber nicht der Standard. Die Standard-Breite für eine Tabelle ist 100%in der Erwägung, dass width:auto; das element wird nur nehmen so viel Breite ein wie es muss.

min-width:auto; ist nicht erlaubt. Wenn Sie min-width es muss einen Wert haben, aber wenn er auf null ist wohl so gut wie das zurücksetzen auf die Standardeinstellungen.

InformationsquelleAutor der Antwort Spudley
1

Gut, display: none; wird nicht angezeigt, die Tabelle, versuchen display: inline-block; mit width und min-width Erklärungen übrigen 'auto'.

InformationsquelleAutor der Antwort Steven

Landete ich mit Javascript alles perfekt.

Mein JS fiddle: 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); 
    }
})

InformationsquelleAutor der Antwort User

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.