Клітини таблиці однакового розміру, щоб заповнити всю ширину таблиці, що містить

Чи є спосіб за допомогою 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 ). Якщо встановити ці дві властивості, комірки таблиці будуть однакові за розміром.

Зверніться до демонстрації .