CSS komórka tabeli równa szerokość

Mam nieokreśloną liczbę elementów komórek tabeli w kontenerze tabeli.

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

Czy istnieje czysty sposób CSS na uzyskanie równej szerokości komórek tabeli, nawet jeśli zawierają one zawartość o różnej wielkości?

Dzięki.

Edycja: posiadanie maksymalnej szerokości wymagałoby wiedzy, ile masz komórek?

Oto działające skrzypce z nieokreśloną liczbą komórek: http://jsfiddle.net/r9yrM/1/

Możesz ustalić szerokość dla każdego rodzica div( tabeli ), w przeciwnym razie będzie to 100% jak zwykle.

Sztuczka polega na użyciu table-layout: fixed;i pewnej szerokości każdej komórki, aby ją wywołać, tutaj 2%. To uruchomi drugi algorytm tabeli, ten, w którym przeglądarki bardzo starają się przestrzegać wskazanych wymiarów.
Przetestuj w przeglądarce Chrome (i IE8 - w razie potrzeby). Jest w porządku z niedawnym Safari, ale nie pamiętam zgodności tej sztuczki z nimi.

CSS (odpowiednie instrukcje):

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 */
}

EDYCJA (2013): Uważaj na Safari 6 na OS X, ma table-layout: fixed; zły (a może po prostu inny, bardzo różniący się od innych przeglądarek. Nie sprawdzałem układu tabeli CSS2.1 REC;)). Przygotuj się na różne wyniki.

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;
}

PRÓBNY.

Samo użycie max-width: 0w display: table-cellelemencie zadziałało dla mnie:

.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>

Zastąpić

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

z

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

Przyjrzyj się wszystkim problemom związanym z próbami sprawienia, aby elementy div działały jak tabele. Musieli dodać table-xxx, aby naśladować układy tabel

Tabele są obsługiwane i działają bardzo dobrze we wszystkich przeglądarkach. Po co ich porzucić? fakt, że musieli ich naśladować, jest dowodem, że wykonali swoją pracę i dobrze.

Moim zdaniem użyj najlepszego narzędzia do pracy i jeśli chcesz, aby dane tabelaryczne lub coś przypominającego tabele danych tabelarycznych po prostu działało.

Bardzo późna odpowiedź, którą znam, ale warto ją wyrazić.

to zadziała dla każdego

<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>

Będzie to również działać w przypadku danych tabeli utworzonych przez iterację

Proszę bardzo:

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

Nie możesz użyć width: 100px, ponieważ ekran jest typu table-cell. Możesz jednak użyć opcji Max-width: 100px. Twoje pudełko nigdy nie będzie większe niż 100 pikseli. ale musisz dodać przepełnienie: ukryte, aby upewnić się, że kontekt nie przeniknie do innych komórek. możesz także dodać spację: nowrap, jeśli chcesz zapobiec zwiększaniu się wysokości.

Można to zrobić, ustawiając styl komórki tabeli na width: auto, a zawartość pustą. Kolumny mają teraz taką samą szerokość, ale nie zawierają treści.

Aby wstawić zawartość do komórki, dodaj za divpomocą css:

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

Musisz także dodać position: relativedo komórek.

Teraz możesz umieścić rzeczywistą zawartość w opisanym powyżej div.

https://jsfiddle.net/vensdvvb/