Gleich große Tabellenzellen, um die gesamte Breite der enthaltenen Tabelle auszufüllen

96

Gibt es eine Möglichkeit, mithilfe von HTML / CSS (mit relativer Größe) eine Zellenreihe über die gesamte Breite der Tabelle zu strecken, in der sie enthalten ist?

Die Zellen sollten gleich breit sein und die äußere Tabellengröße ist auch dynamisch mit <table width="100%"> .

Derzeit, wenn ich keine feste Größe spezifiziere; Die Zellen werden nur automatisch angepasst, um sie an ihren Inhalt anzupassen.

html css html-table Yogi Bär
quelle

Antworten:

144

Sie müssen nicht einmal eine bestimmte Breite für die Zellen festlegen, table-layout: fixedreicht aus, um die Zellen gleichmäßig zu verteilen.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>
Erweitern Sie das Snippet

Beachten Sie, dass für table-layoutdas Element im Tabellenstil eine Breite festgelegt werden muss (in meinem Beispiel 100%).

Simon
quelle
11
Diese Lösung ist besser und sollte auch mit dynamisch generierten Spalten
funktionieren
Wenn eine Zeichenfolge die maximale Breite überschreitet, sind Sie in Schwierigkeiten
Sterling Archer
5
Das Hinzufügen word-wrap:break-wordwird dieses Problem beheben, wie ich gerade entdeckt habe
Sterling Archer
113

Verwenden Sie einfach prozentuale Breiten und ein festes Tabellenlayout :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

mit

table { table-layout: fixed; }
td { width: 33%; }

Ein festes Tabellenlayout ist wichtig, da der Browser sonst die Breiten nach Belieben anpasst, wenn der Inhalt nicht passt, dh die Breiten sind ansonsten ein Vorschlag, keine Regel ohne festes Tabellenlayout.

Passen Sie das CSS natürlich an Ihre Umstände an, was normalerweise bedeutet, dass das Styling nur auf Tabellen mit einer bestimmten Klasse oder möglicherweise mit einer bestimmten ID angewendet wird.

Cletus
quelle
und stellen Sie sicher, dass Sie td Selector nicht andere beteiligte td's auswählen: D
Gordon Gustafson
3
Sie müssen die Breite von nicht festlegen, tdda Sie möglicherweise eine dynamische Anzahl von Spalten haben… und es funktioniert ohne diese durch.
27аниил Пронин
4

Verwendung table-layout: fixedals Eigenschaft für tableund width: calc(100%/3);für td( vorausgesetzt, es gibt 3 td's ). Mit diesen beiden Eigenschaften festgelegt, die Tabellenzellen werden gleich groß.

Siehe die Demo .

Shashank
quelle
2
Sie brauchen nicht beide, jede Lösung allein würde ausreichen.
Chris Kraszewski