Celle di tabella di dimensioni uguali per riempire l'intera larghezza della tabella contenente

C'è un modo usando HTML / CSS (con relativo dimensionamento) per fare in modo che una riga di celle allunghi l'intera larghezza della tabella all'interno della quale è contenuta?

Le celle dovrebbero avere la stessa larghezza e anche la dimensione della tabella esterna è dinamica con <table width="100%">.

Attualmente se non specifico una dimensione fissa; le celle si ridimensionano automaticamente per adattarsi al loro contenuto.

Non è nemmeno necessario impostare una larghezza specifica per le celle, è table-layout: fixedsufficiente distribuire le celle in modo uniforme.

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>

Nota che per table-layoutfunzionare l'elemento in stile tabella deve avere una larghezza impostata (100% nel mio esempio).

Usa solo larghezze percentuali e layout fisso della tabella :

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

con

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

Il layout fisso della tabella è importante perché altrimenti il ​​browser adatterà le larghezze come meglio crede se i contenuti non si adattano, cioè le larghezze sono altrimenti un suggerimento non una regola senza un layout fisso della tabella.

Ovviamente, regola il CSS in base alle tue circostanze, il che di solito significa applicare lo stile solo a tabelle con una data classe o possibilmente con un dato ID.

Utilizzando table-layout: fixedcome proprietà di tablee width: calc(100%/3);per td( supponendo che vi sono 3 td's ). Con queste due proprietà impostate, le celle della tabella avranno le stesse dimensioni.

Fare riferimento alla demo .