CSS tablo hücresi eşit genişliği

Bir tablo kabı içinde belirsiz sayıda tablo hücre öğeleri var.

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

İçerisinde farklı boyutlarda içerik olsa bile, tablo hücrelerinin eşit genişlikte olmasını sağlamanın saf bir CSS yolu var mı?

Teşekkürler.

Düzenleme: Bir maksimum genişlik olması kaç hücre olduğunu düşünüyorum bilmek gerektirir?

İşte belirsiz sayıda hücre ile çalışan bir keman: http://jsfiddle.net/r9yrM/1/

Her bir ebeveyne div( tablo ) bir genişlik düzeltebilirsiniz , aksi takdirde her zamanki gibi% 100 olur.

Hile kullanmak table-layout: fixed;ve her hücre üzerinde bazı genişlik, burada% 2 kullanmaktır. Bu, tarayıcıların belirtilen boyutlara uymak için çok uğraştığı diğer tablo algoritmasını tetikleyecektir .
Lütfen Chrome ile test edin (ve gerekirse IE8-). Yeni bir Safari ile sorun yok ama bu hile onlarla uyumluluk hatırlayamıyorum.

CSS (ilgili talimatlar):

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): OS X'te Safari 6'ya dikkat edin, table-layout: fixed; yanlış (veya belki de sadece farklı, diğer tarayıcılardan çok farklı. CSS2.1 REC tablo düzenini kanıtlamamıştım;)). Farklı sonuçlara hazırlıklı olun.

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.

Sadece kullanarak max-width: 0yılında display: table-cellbenim için çalıştı elemanı:

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

değiştirmek

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

ile

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

Div'lerin tablo gibi çalışmasını sağlamaya çalışan tüm konulara bakın. Tablo düzenlerini taklit etmek için table-xxx eklemek zorunda kaldılar

Tablolar desteklenir ve tüm tarayıcılarda çok iyi çalışır. Onları neden terk ettiniz? onları taklit etmek zorunda olmaları, işlerini iyi yaptığını kanıtlar.

Bence iş için en iyi aracı kullanın ve çizelgeli veri veya çizelgeli veri tablolarına benzeyen bir şey istiyorsanız sadece çalışır.

Çok geç cevap biliyorum ama dile getirmeye değer.

bu herkes için işe yarayacak

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

Bu, yineleme ile oluşturulan tablo verileri için de çalışır

Hadi bakalım:

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

Genişlik: 100 piksel kullanamazsınız, çünkü ekran tablo hücresidir. Ancak Maks. Genişlik: 100 piksel kullanabilirsiniz. kutunuz asla 100 pikselden daha büyük olmaz. ancak taşma eklemeniz gerekir: contect'in diğer hücrelere kanamadığından emin olmak için gizli. beyaz boşluk da ekleyebilirsiniz: yüksekliği artırmak istemiyorsanız nowrap.

Bu, tablo hücresi stilini width: autove içeriği boş olarak ayarlayarak yapılabilir . Sütunlar artık eşit genişlikte ancak içerik barındırmıyor.

Hücreye içerik eklemek için divcss ile bir ekleyin :

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

Ayrıca position: relativehücrelere eklemeniz gerekir .

Şimdi gerçek içeriği yukarıda bahsi geçen div'e koyabilirsiniz.

https://jsfiddle.net/vensdvvb/