Wie mache ich Tabellenzellen mit CSS gleich breit?

Tabellenzellen gleicher Breite mit CSS

Frage:

Wie können wir eine Unbestimmtheit erstellen? Anzahl der Tabellenzellenelemente innerhalb eines Tabellencontainers gleich breit, unabhängig von ihrer Inhaltsgröße?

Antwort:

Ja, das lässt sich mit reinem CSS erreichen .

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment */
}</code>

So funktioniert es:

1. Tabellenlayout festlegen: fest; auf dem übergeordneten Div-Container. Dadurch wird ein Tabellenlayoutalgorithmus aktiviert, bei dem die Tabelle versucht, bestimmte Abmessungen beizubehalten.
2. Weisen Sie jedem Div (Tabellenzelle) eine Breite zu. In diesem Beispiel haben wir ihn auf 2 % eingestellt, aber Sie können ihn entsprechend Ihren Anforderungen anpassen.
3. Diese Breite löst das Verhalten des festen Tabellenlayouts aus und der Browser weist jeder Zelle gleichmäßig Breiten zu, um sicherzustellen Sie haben unabhängig von der Inhaltsgröße die gleiche Breite.

Zusätzliche Hinweise:

• Diese Lösung ist mit Chrome und IE8 kompatibel.
• Beachten Sie, dass Safari 6 unter macOS eine andere Interpretation des Tabellenlayouts hat: behoben;. Dies könnte in diesem Browser zu unterschiedlichen Ergebnissen führen.
• Sie können eine feste Breite für das übergeordnete Div (Tabelle) festlegen, um die Gesamtbreite der Tabelle zu steuern. Wenn Sie keine Breite angeben, wird standardmäßig 100 % verwendet.

Das obige ist der detaillierte Inhalt vonWie mache ich Tabellenzellen mit CSS gleich breit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!