Вопрос по html, css – CSS-ячейка таблицы равной ширины

131

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

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

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

Благодарю.

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

После того, как я попробовал некоторые методы, я думаю, что если вы хотите иметь несколько строк и хотите, чтобы они были одинаковой ширины, используйте flexbox вместо таблицы Eric
Как определяется количество столбцов: на стороне клиента или сервера? iambriansreed

Ваш Ответ

7   ответов
0

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

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

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

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

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

https://jsfiddle.net/vensdvvb/

4

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;">&l,t;/div>
  </div>

с

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

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

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

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

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

Для отзывчивого идеала иметь макет на основе div. Отображение таблиц в мобильных устройствах - это боль в заднице.
+1 потому что работает и потому что CSSstill, in 2014 не делает это правильно во всех браузерах.
Иногда вам нужен табличный макет для вещей, которые не являются табличными данными. например элементы навигации, которые следует использовать<nav>, <ul>, так далее.
Попытка эмулировать таблицу исключает адаптивный дизайн. Я согласен, если вы хотите адаптивный дизайн, таблицы не являются выбором.
Таблицы были созданы для отображения табличных данных: это были, есть и будут элементы HTML, которые будут использоваться для отображения табличных данных, зачем кому-то отказываться от них (для этой цели)? Расположение таблицы не являетсяmimicked: он уже некоторое время является частью рекомендации CSS2, и бывает, что макет HTML-таблиц по умолчаниюdisplay: table-etc (вполне естественно). Я не трачу свои дни на создание ссылок, имитирующих div или div, имитирующих таблицы, промежутки или вводы: я просто использую CSS для стилизации. Наконец, удачи с IE9 для применения любого другого значенияdisplay свойство таблицы, tr, td элементов.
23

HTML

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

Это решение не очень масштабируемо для чего-либо динамического, такого как навигация по сайту, контролируемая клиентом.
Скрипка здесь не работает. Клетки всегда 25%.
Вероятно, вы правы, и между прочим, это почти два года назад @QuantumDynamix. Есть что-нибудь лучше на уме? Почему бы просто не поделиться своей идеей, пусть мир узнает о лучших вещах :-)
0

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

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

12

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>

Просто придираюсь, но0px не является действительной единицей. Это должно быть просто0.
283

http://jsfiddle.net/r9yrM/1/

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

Хитрость заключается в использованииtable-layout: fixed; и некоторая ширина в каждой ячейке, чтобы вызвать его, здесь 2%. Это вызоветother Таблица 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; wrong (или, может быть, просто другой, сильно отличающийся от других браузеров. Я не проверял макет таблицы CSS2.1 REC;)). Будьте готовы к разным результатам.

Ширина 100% также не работает в IE10. Этоdid работать в IE11. И 1% ширины заставили Mobile Safari показать супер узкие колонны. Поэтому я использовал CSS-хак для IE9 и IE10:.my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } } CSS взломать отсюда:stackoverflow.com/a/24321386/6962
Спасибо, это похоже на ответ. Я не знаю, почему, но если я установлю ширину на 2%, это фактически увеличит каждый столбец до 2%. Но 100%, кажется, работает отлично. Есть идеи, что там происходит? Harry
Ширина 100% не работала на IE8 (неожиданно), но первоначальное предложение для 2% дает правильные результаты.
Чтобы расширить это, это работает для простых макетов (1x1, 2x2, 3x3 и т. Д.), Но сложные макеты (1x3x1, 1x2x3x4 и т. Д.) Требуют дополнительныхdivсdisplay:table использоваться как строки, а неdisplay:tabl-row как и следовало ожидать.Example here.
Я столкнулся с той же проблемой необходимости использования 100% ширины в ячейках таблицы. Это происходило из-за исправления, примененного к родительскому элементу с помощью display: table. Так как ячейки 100% ширины не работают в IE8, для меня исправлением было удалить исправление. Надеюсь, это кому-нибудь поможет.
1

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

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

Похожие вопросы