Sel tabel berukuran sama untuk mengisi seluruh lebar tabel penampung

Apakah ada cara menggunakan HTML / CSS (dengan ukuran relatif) untuk membuat baris sel merentangkan seluruh lebar tabel di dalamnya?

Sel harus sama lebarnya dan ukuran tabel luar juga dinamis dengan <table width="100%">.

Saat ini jika saya tidak menentukan ukuran tetap; sel-selnya hanya mengubah ukuran agar sesuai dengan isinya.

Anda bahkan tidak perlu menyetel lebar khusus untuk sel, table-layout: fixedcukup untuk menyebarkan sel secara merata.

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>

Perhatikan bahwa untuk table-layoutbekerja elemen bergaya tabel harus memiliki set lebar (100% dalam contoh saya).

Cukup gunakan lebar persentase dan tata letak tabel tetap :

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

dengan

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

Tata letak tabel tetap penting karena jika tidak browser akan menyesuaikan lebar sesuai keinginan jika isinya tidak sesuai, yaitu lebar jika tidak, saran bukan aturan tanpa tata letak tabel tetap.

Tentunya, sesuaikan CSS agar sesuai dengan keadaan Anda, yang biasanya berarti menerapkan gaya hanya ke tabel dengan kelas tertentu atau mungkin dengan ID tertentu.

Menggunakan table-layout: fixedsebagai properti untuk tabledan width: calc(100%/3);untuk td( dengan asumsi ada 3 td's ). Dengan mengatur dua properti ini, sel tabel akan memiliki ukuran yang sama .

Lihat demo .