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

Ответ 1

Вот рабочая скрипка с неопределенным количеством ячеек: 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 */
}

EDIT (2013): Остерегайтесь Safari 6 в OS X, у него есть table-layout: fixed; неправильный (или, может быть, просто отличный, очень отличный от других браузеров). Я не проверял CSS2.1., Будьте готовы к разным результатам.

Ответ 2

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.

Ответ 3

Просто используя 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>

Ответ 4

Заменить

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

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

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

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

Очень Поздний ответ, который я знаю, но заслуживаю внимания.

Ответ 5

Здесь вы идете:

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

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

Ответ 6

Это можно сделать, установив стиль table-cell в width: auto, а содержимое пустым. Столбцы теперь равны по ширине, но не содержат содержимого.

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

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

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

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

https://jsfiddle.net/vensdvvb/