Ячейки таблицы равного размера, чтобы заполнить всю ширину содержащей таблицы

Question

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

Ячейки должны быть одинаковой ширины, а внешний размер таблицы также является динамическим с <table width="100%">.

В настоящее время, если я не укажу фиксированный размер; клетки просто автоматически меняются, чтобы соответствовать их содержимому.

Answer 1

Вам даже не нужно устанавливать конкретную ширину для ячеек, table-layout: fixed достаточно для равномерного распределения ячеек. Смотрите это jsfiddle , протестировано на IE8.

Обратите внимание, что для работы table-layout элемент таблицы должен иметь ширину (100% в моем примере).

Answer 2

Просто используйте процентную ширину и фиксированную разметку таблицы :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

с

table { table-layout: fixed; }
td { width: 33%; }

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

Очевидно, настройте CSS в соответствии с вашими обстоятельствами, что обычно означает применение стиля только ктаблицы с заданным классом или, возможно, с заданным идентификатором.

Answer 3

Использование table-layout: fixed в качестве свойства для table и width: calc(100%/3); для td ( при условии 3 td s ). С этими двумя установленными свойствами ячейки таблицы будут иметь размер , равный .

См. Демоверсию .