Jednakowe komórki tabeli, aby wypełnić całą szerokość zawierającej tabelę

Czy istnieje sposób za pomocą HTML / CSS (ze względnym rozmiarem), aby wiersz komórek rozciągał się na całą szerokość tabeli, w której się znajduje?

Komórki powinny mieć równe szerokości, a rozmiar tabeli zewnętrznej również jest dynamiczny <table width="100%"> .

Obecnie, jeśli nie określę stałego rozmiaru; komórki po prostu dostosowują się do ich zawartości.

Nie musisz nawet ustawiać określonej szerokości komórek, table-layout: fixedwystarczy równomiernie rozłożyć komórki.

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>

Zauważ, że table-layoutaby działał element stylizowany na tabelę, musi mieć ustawioną szerokość (w moim przykładzie 100%).

Po prostu użyj procentowych szerokości i stałego układu tabeli :

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

z

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

Stały układ tabeli jest ważny, ponieważ w przeciwnym razie przeglądarka dostosuje szerokości według własnego uznania, jeśli zawartość nie pasuje, tj. Szerokości są w przeciwnym razie sugestią, a nie regułą bez stałego układu tabeli.

Oczywiście dostosuj CSS do swoich okoliczności, co zwykle oznacza zastosowanie stylu tylko do tabel z daną klasą lub ewentualnie z danym ID.

Przy użyciu table-layout: fixed, jako właściwości dla tablei width: calc(100%/3);na td( zakładając, że są 3 td„s ). Po ustawieniu tych dwóch właściwości komórki tabeli będą miały równy rozmiar.

Zapoznaj się z demo .