Células de tabela de tamanho igual para preencher toda a largura da tabela que a contém

Existe uma maneira de usar HTML / CSS (com tamanho relativo) para fazer uma linha de células esticar toda a largura da tabela na qual está contida?

As células devem ter larguras iguais e o tamanho da mesa externa também é dinâmico com <table width="100%">.

Atualmente, se eu não especificar um tamanho fixo; as células são dimensionadas automaticamente para caber em seus conteúdos.

Você nem mesmo precisa definir uma largura específica para as células, o table-layout: fixedsuficiente para espalhar as células uniformemente.

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>

Observe que para table-layoutfuncionar o elemento estilizado da tabela deve ter uma largura definida (100% no meu exemplo).

Basta usar larguras percentuais e layout de mesa fixo :

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

com

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

O layout fixo da mesa é importante, caso contrário, o navegador ajustará as larguras conforme achar apropriado se o conteúdo não couber, ou seja, as larguras são uma sugestão e não uma regra sem o layout fixo da mesa.

Obviamente, ajuste o CSS para se adequar às suas circunstâncias, o que geralmente significa aplicar o estilo apenas a tabelas com uma determinada classe ou possivelmente com um determinado ID.

Usando table-layout: fixedcomo uma propriedade para tablee width: calc(100%/3);para td( assumindo que existem 3 td's ). Com essas duas propriedades definidas, as células da tabela terão o mesmo tamanho.

Consulte a demonstração .