webentwicklung-frage-antwort-db.com.de

Wie (und warum) man display benutzt: table-cell (CSS)

Ich habe eine Site mit einem sehr aktiven Hintergrund (ich spreche hier 6 oder so verschiedene Z-Indizes 2 mit Animationen). Ich wollte eine im Vordergrund, die Inhalt hatte, aber ein "Fenster" durch den Hintergrund wollte. Einige Probleme, die ich hatte:

  1. du kannst kein Loch in einen Hintergrund schlagen, also ...

    • Ich habe ein enthaltendes div gebaut, nennen wir es "srminfo"
    • Darin hatte ich ein "oben", "links", "Fenster", "rechts" und "unten"
    • oben, links, rechts und unten hatten alle einen undurchsichtigen weißen Hintergrund
    • während die srminfo und window divs Hintergrund hatten: none;
  2. Egal wie sehr ich es auch versucht habe, der "richtige" Div würde den Raum zwischen den "oberen" und "unteren" Divs nicht ausfüllen, ich habe viele verschiedene Dinge ausprobiert. Der Grund, warum es dynamisch sein musste, ist, dass der Text im "linken" Div dynamisch war, basierend auf der Hintergrundfarbe, die selbst zufällig mit JavaScript generiert wurde.

Wie wird angezeigt: Tabelle; und alle anderen verwandten CSS-Code wie Tabellen? Und wie kann es genutzt werden?

6
Jim

Nachdem ich tagelang versucht hatte, die Antwort zu finden, fand ich sie endlich

anzeige: Tabelle;

Es gab überraschenderweise nur sehr wenige Online-Informationen darüber, wie man es tatsächlich zum Laufen bringt, auch hier, also weiter zum "How":

Um diesen fantastischen Code zu verwenden, müssen Sie an die Zeit zurückdenken, als Tabellen die einzige echte Möglichkeit zur Strukturierung von HTML waren, nämlich die Syntax. Um eine Tabelle mit 2 Zeilen und 3 Spalten zu erhalten, müssen Sie folgende Schritte ausführen:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Um CSS dazu zu bringen, würden Sie auf ähnliche Weise Folgendes verwenden:

HTML

<div id="table">
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
    <div class="tr">
        <div class="td"></div>
        <div class="td"></div>
        <div class="td"></div>
    </div>
</div>

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

Wie Sie im folgenden JSFiddle-Beispiel sehen können, haben die Divs in der 3. Spalte keinen Inhalt, berücksichtigen jedoch die automatische Höhe, die durch den Text in den ersten beiden Spalten festgelegt wurde. SIEG!

http://jsfiddle.net/blyzz/1djs97yv/1/

Beachten Sie, dass display: table; in IE6 oder 7 (danke, FelipeAls) nicht funktioniert. Abhängig von Ihren Anforderungen hinsichtlich der Browserkompatibilität ist dies möglicherweise nicht die Antwort, die Sie suchen.

20
Jim

Die display:table-Familie von CSS-Eigenschaften ist meistens vorhanden, sodass HTML-Tabellen in Bezug auf diese definiert werden können. Da sie so eng mit einer bestimmten Tag-Struktur verknüpft sind, sehen sie darüber hinaus keinen großen Nutzen.

Wenn Sie diese Eigenschaften in Ihrer Seite verwenden möchten, benötigen Sie eine Tag-Struktur, die der von Tabellen sehr ähnlich ist, obwohl Sie nicht die <table>-Familie von Tags verwenden . Eine minimale Version wäre ein einzelnes Containerelement (display:table) mit direkten untergeordneten Elementen, die alle als Zeilen (display:table-row) dargestellt werden können, und direkten untergeordneten Elementen, die alle als Zellen (display:table-cell) dargestellt werden können. Es gibt andere Eigenschaften, mit denen Sie andere Tags in der Familie table imitieren können, für die jedoch analoge Strukturen im HTML-Code erforderlich sind. Ohne dies wird es sehr schwierig (wenn nicht unmöglich) sein, diese Eigenschaften gut zu nutzen.

3
The Spooniest

Es ist noch einfacher, die übergeordnete> untergeordnete Auswahlbeziehung zu verwenden, sodass die CSS-Klassen des inneren Div nicht explizit definiert werden müssen:

.display-table {
    display: table; 
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
    padding: 5px;
}
<div class="display-table">
    <div>
        <div>0, 0</div>
        <div>0, 1</div>
    </div>
    <div>
        <div>1, 0</div>
        <div>1, 1</div>
    </div>
</div>
3
Dmitriy Sintsov

Wie (und warum) man display benutzt: table-cell (CSS)

Ich wollte nur erwähnen, dass die Antwort auf das "Warum", da ich glaube, dass keine der anderen Antworten direkt zutrifft, lautet: Es gibt keinen guten Grund, und Sie sollten dies wahrscheinlich niemals tun.

In meinem über zehnjährigen Erfahrungsschatz in der Webentwicklung fällt mir kein einziges Mal ein, bei dem es besser gewesen wäre, ein paar <div>s mit display -Stilen zu haben, als nur Tabellenelemente.

Die einzige Hypothese, die mir einfallen könnte, ist, wenn Sie Tabellendaten in einer Art Nicht-HTML-Tabellenformat (z. B. eine CSV-Datei) gespeichert haben. In einer sehr speziellen Version dieses Falls ist es möglicherweise einfacher, einfach <div>-Tags um alles und dann nachgeordnete Stile hinzuzufügen, anstatt tatsächliche Tabellen-Tags hinzuzufügen.

Aber das ist ein extrem ausgeklügeltes Beispiel, und in allen realen Fällen ist es besser, einfach Tabellen-Tags zu verwenden.

2
machineghost