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

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

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

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

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

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

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

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

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

с участием

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

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

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

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

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