CSS-ячейка таблицы равной ширины

У меня есть неопределенное количество элементов ячейки таблицы внутри контейнера таблицы.

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

Есть ли чистый способ CSS сделать ячейки таблицы равными по ширине, даже если в них есть контент разного размера?

Спасибо.

Изменить: Наличие максимальной ширины повлечет за собой знание того, сколько ячеек у вас есть, я думаю?

Вот рабочая скрипка с неопределенным количеством ячеек: http://jsfiddle.net/r9yrM/1/

Вы можете зафиксировать ширину для каждого родителя div( таблицы ), иначе она будет на 100% как обычно.

Хитрость заключается в том, чтобы использовать table-layout: fixed;и некоторую ширину каждой ячейки, чтобы вызвать ее, здесь 2%. Это вызовет другую таблицу algorightm, в которой браузеры очень стараются соблюдать указанные размеры.
Пожалуйста, проверьте с Chrome (и IE8-при необходимости). Это нормально с недавним Safari, но я не могу вспомнить совместимость этого трюка с ними.

CSS (соответствующие инструкции):

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

РЕДАКТИРОВАТЬ (2013): Остерегайтесь Safari 6 на OS X, он имеет table-layout: fixed; ошибки (или, возможно, просто отличается, сильно отличается от других браузеров. Я не проверял макет таблицы CSS2.1 REC;)). Будьте готовы к разным результатам.

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.

Просто использование max-width: 0в display: table-cellэлементе работало для меня:

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

замещать

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

с участием

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

Посмотрите на все проблемы, связанные с попытками заставить div работать как таблицы. Они должны были добавить table-xxx, чтобы имитировать расположение таблиц

Таблицы поддерживаются и работают очень хорошо во всех браузерах. Зачем их угробить? тот факт, что им пришлось имитировать их, является доказательством того, что они хорошо выполнили свою работу.

На мой взгляд, используйте лучший инструмент для работы, и если вы хотите, чтобы табличные данные или что-то похожее на табличные таблицы данных просто работали.

Очень поздний ответ, я знаю, но озвучивать стоит.

это будет работать для всех

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

Это также будет работать для данных таблицы, созданных итерацией

Ну вот:

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

Вы не можете использовать width: 100px, потому что дисплей - ячейка таблицы. Однако вы можете использовать Max-width: 100px. тогда ваша коробка никогда не станет больше, чем 100px. но вам нужно добавить переполнение: скрытый, чтобы контекст не кровоточил в другие ячейки. Вы также можете добавить пробел: nowrap, если вы хотите, чтобы высота не увеличивалась.

Это можно сделать, установив стиль ячейки таблицы в значение width: auto, и содержимое будет пустым. Столбцы теперь равны по ширине, но не содержат содержимого.

Чтобы вставить содержимое в ячейку, добавьте с divпомощью css:

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

Вы также должны добавить position: relativeв ячейки.

Теперь вы можете поместить фактический контент в div, о котором говорилось выше.

https://jsfiddle.net/vensdvvb/