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%. Це призведе до іншої алгоритми таблиці, тієї, де браузери дуже намагаються дотримуватися вказаних розмірів.
Перевірте 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 */
}

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

Подивіться на всі проблеми, які намагаються змусити діви виконуватись як таблиці. Вони повинні були додати 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/

Ви не можете використовувати ширину: 100 пікселів, оскільки дисплей є стільниковою коміркою. Однак ви можете використовувати Max-width: 100px. то ваша коробка ніколи не набере більше 100 пікс. але вам потрібно додати переповнення: приховано, щоб переконатися, що конкурент не кровоточить в інші клітини. Ви також можете додати пробіл: spacerap, якщо хочете утримати висоту від збільшення.

Це можна зробити, встановивши стиль стільника комірки на width: autoта вміст порожнім. Стовпці тепер однакові, але вміст не містить.

Щоб вставити вміст у комірку, додайте divcss:

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

Також потрібно додати position: relativeдо комірок.

Тепер ви можете розмістити фактичний вміст у розказаному діві вище.

https://jsfiddle.net/vensdvvb/