CSS-Tabellenzelle gleich breit

Ich habe eine unbestimmte Anzahl von Tabellenzellenelementen in einem Tabellencontainer.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Gibt es eine reine CSS-Methode, um die Tabellenzellen gleich breit zu machen, selbst wenn sie unterschiedlich große Inhalte enthalten?

Vielen Dank.

Bearbeiten: Eine maximale Breite würde bedeuten, zu wissen, wie viele Zellen Sie haben, denke ich?

Hier ist eine funktionierende Geige mit einer unbestimmten Anzahl von Zellen: http://jsfiddle.net/r9yrM/1/

Sie können jedem übergeordneten Element div(der Tabelle ) eine Breite festlegen , andernfalls beträgt sie wie gewohnt 100%.

Der Trick besteht darin, table-layout: fixed;für jede Zelle eine gewisse Breite zu verwenden, um sie auszulösen, hier 2%. Dies löst den anderen Tabellenalgorithmus aus, bei dem die Browser sehr bemüht sind, die angegebenen Abmessungen einzuhalten.
Bitte testen Sie mit Chrome (und IE8 - falls erforderlich). Es ist in Ordnung mit einer kürzlich durchgeführten Safari, aber ich kann mich nicht an die Kompatibilität dieses Tricks mit ihnen erinnern.

CSS (relevante Anweisungen):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Vorsicht vor Safari 6 unter OS X, es ist table-layout: fixed; falsch (oder vielleicht nur anders, sehr verschieden von anderen Browsern. Ich habe das CSS2.1 REC-Tabellenlayout nicht Korrektur gelesen;)). Seien Sie auf unterschiedliche Ergebnisse vorbereitet.

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>​

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

DEMO.

Nur die Verwendung max-width: 0in dem display: table-cellElement hat für mich funktioniert:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}

<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>

Ersetzen

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

mit

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

Schauen Sie sich alle Probleme an, die mit dem Versuch verbunden sind, Divs wie Tabellen auszuführen. Sie mussten table-xxx hinzufügen, um Tabellenlayouts nachzuahmen

Tabellen werden unterstützt und funktionieren in allen Browsern sehr gut. Warum sie fallen lassen? Die Tatsache, dass sie sie nachahmen mussten, ist ein Beweis dafür, dass sie ihre Arbeit gut gemacht haben.

Meiner Meinung nach verwenden Sie das beste Tool für den Job und wenn Sie tabellarische Daten oder etwas, das tabellarischen Datentabellen ähnelt, möchten, funktionieren Sie einfach.

Sehr späte Antwort Ich weiß, aber es lohnt sich zu äußern.

Das wird für alle funktionieren

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Dies funktioniert auch für Tabellendaten, die durch Iteration erstellt wurden

Bitte schön:

http://jsfiddle.net/damsarabi/gwAdA/

Sie können width: 100px nicht verwenden, da die Anzeige eine Tabellenzelle ist. Sie können jedoch Max-width: 100px verwenden. dann wird deine Box niemals größer als 100px. Sie müssen jedoch einen Überlauf hinzufügen: versteckt, um sicherzustellen, dass der Contect nicht in andere Zellen blutet. Sie können auch Leerzeichen hinzufügen: nowrap, wenn Sie verhindern möchten, dass die Höhe zunimmt.

Dies kann erreicht werden, indem der Tabellenzellenstil auf width: autound der Inhalt leer gesetzt wird. Die Spalten sind jetzt gleich breit, enthalten jedoch keinen Inhalt.

Fügen Sie zum Einfügen von Inhalten in die Zelle eine divmit css hinzu:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

Sie müssen auch position: relativezu den Zellen hinzufügen .

Jetzt können Sie den eigentlichen Inhalt in das oben beschriebene div einfügen.

https://jsfiddle.net/vensdvvb/