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

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

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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Обратитесь к демо.