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

Question

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

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

<div style="display:table;">

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

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

</div>

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

спасибо.

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

665 7

html css html-table

7 ответов:

Comments

Ничего не найдено.

FelipeAls · Accepted Answer · 2013-03-29 09:54:40

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

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

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

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 table layout;)). Будьте готовы к разным результатам.

The Alpha · Accepted Answer · 2012-05-10 20:43:44

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

демо.

José Antonio Postigo · Accepted Answer · 2017-04-12 13:39:52

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

DeveloperChris · Accepted Answer · 2014-04-22 06:54:05

заменить
  <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 для имитации макетов таблиц

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

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

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

tcasante1 · Accepted Answer · 2018-08-25 06:36:26

это будет работать для всех
<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">

<tr>
<td roll="gridcell"></td>
</tr>
</table>
Это также будет работать для табличных данных, созданные итерации

Sammy · Accepted Answer · 2012-05-10 03:04:53

вот так:

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

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

RnMss · Accepted Answer · 2016-05-05 04:59:58

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

чтобы вставить содержимое в ячейку, добавьте div С css:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
Вам также нужно добавить position: relative к клеткам.

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

https://jsfiddle.net/vensdvvb/