it-roy-ru.com

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

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

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

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

Благодарю.

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

134
Harry

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

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

285
FelipeAls

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

ДЕМО.

23
The Alpha

Просто использование 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>
13
José Antonio Postigo

Замещать

  <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, чтобы имитировать расположение таблиц

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

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

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

5
DeveloperChris

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

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

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

1
tcasante1

Ну вот:

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

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

0
Sammy

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

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

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

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

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

https://jsfiddle.net/vensdvvb/

0
RnMss