Есть ли способ использовать HTML/CSS (с относительным размером), чтобы строка ячеек растягивала всю ширину таблицы, в которой она содержится?
Ячейки должны быть одинаковой ширины, а внешний размер таблицы также динамический с <table width="100%">.
В настоящее время, если я не укажу фиксированный размер; ячейки просто автоматизируют, чтобы соответствовать их содержимому.
Вам даже не нужно задавать конкретную ширину для ячеек, table-layout: fixed достаточно table-layout: fixed чтобы равномерно распределить ячейки. Смотрите этот jsfiddle, протестированный на IE8.
Обратите внимание, что для работы
table-layoutтаблицы элемент стиля таблицы должен иметь заданную ширину (в моем примере это 100%).
Просто используйте процентную ширину и фиксированный макет таблицы:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
с
table { table-layout: fixed; }
td { width: 33%; }
Фиксированный макет таблицы важен, так как в противном случае браузер будет регулировать ширину по своему усмотрению, если содержимое не подходит, т.е. ширина в противном случае является предложением, а не правилом без фиксированной таблицы.
Очевидно, отрегулируйте CSS, чтобы он соответствовал вашим обстоятельствам, что обычно означает применение стиля только к таблицам с данным классом или, возможно, с заданным ID.
Используя table-layout: fixed как свойство для table и width: calc(100%/3); для td (при условии, что существует 3 td 's). С этими двумя установленными свойствами ячейки таблицы будут равны по размеру.
Обратитесь к демо.