Sel tabel CSS sama dengan lebar

Saya memiliki sejumlah elemen sel tabel di dalam wadah tabel.

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

Apakah ada cara CSS murni untuk mendapatkan sel tabel untuk menjadi sama lebar bahkan jika mereka memiliki ukuran konten yang berbeda di dalamnya?

Terima kasih.

Sunting: Memiliki max-width akan memerlukan mengetahui berapa banyak sel yang Anda miliki, saya pikir?

Berikut adalah biola yang berfungsi dengan jumlah sel yang tidak ditentukan: http://jsfiddle.net/r9yrM/1/

Anda dapat memperbaiki lebar untuk setiap orang tua div( tabel ), jika tidak maka akan menjadi 100% seperti biasa.

Caranya adalah dengan menggunakan table-layout: fixed;dan beberapa lebar pada setiap sel untuk memicunya, di sini 2%. Itu akan memicu algoritma tabel lainnya , yang mana browser berusaha sangat keras untuk menghormati dimensi yang ditunjukkan.
Silakan uji dengan Chrome (dan IE8- jika perlu). Tidak apa-apa dengan Safari baru-baru ini, tetapi saya tidak ingat kompatibilitas trik ini dengan mereka.

CSS (instruksi yang relevan):

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): Waspadai Safari 6 di OS X, ada table-layout: fixed; kesalahan (atau mungkin hanya berbeda, sangat berbeda dari browser lain. Saya tidak membaca-baca tata letak tabel REC CSS2.1;)). Bersiaplah untuk hasil yang berbeda.

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.

Hanya menggunakan max-width: 0di display: table-cellelemen bekerja untuk saya:

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

Menggantikan

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

dengan

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

Lihatlah semua masalah di sekitar mencoba membuat div berfungsi seperti tabel. Mereka harus menambahkan table-xxx untuk meniru tata letak tabel

Tabel didukung dan berfungsi dengan sangat baik di semua browser. Mengapa membuang mereka? fakta bahwa mereka harus meniru mereka adalah bukti bahwa mereka melakukan pekerjaan mereka dengan baik.

Menurut pendapat saya gunakan alat terbaik untuk pekerjaan itu dan jika Anda ingin data tabulasi atau sesuatu yang menyerupai tabel data tabulasi hanya bekerja.

Sangat terlambat balas saya tahu tapi layak disuarakan.

ini akan bekerja untuk semua orang

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

Ini juga akan berfungsi untuk data tabel yang dibuat oleh iterasi

Ini dia:

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

Anda tidak dapat menggunakan lebar: 100px, karena tampilan adalah sel tabel. Namun Anda dapat menggunakan Max-width: 100px. maka kotak Anda tidak akan pernah menjadi lebih besar dari 100px. tetapi Anda perlu menambahkan overflow: disembunyikan untuk memastikan contect tidak berdarah ke sel lain. Anda juga dapat menambahkan ruang putih: nowrap jika Anda ingin menjaga ketinggian agar tidak bertambah.

Ini dapat dilakukan dengan menyetel gaya sel tabel ke width: auto, dan konten kosong. Kolom sekarang sama lebarnya, tetapi tidak memuat konten.

Untuk memasukkan konten ke sel, tambahkan divdengan css:

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

Anda juga perlu menambahkan position: relativeke sel.

Sekarang Anda dapat memasukkan konten aktual ke div yang disebutkan di atas.

https://jsfiddle.net/vensdvvb/