Celdas de tabla de igual tamaño para llenar todo el ancho de la tabla contenedora

¿Hay alguna forma de usar HTML / CSS (con tamaño relativo) para hacer que una fila de celdas se extienda por todo el ancho de la tabla dentro de la cual está contenida?

Las celdas deben tener el mismo ancho y el tamaño de la tabla exterior también es dinámico con <table width="100%">.

Actualmente, si no especifico un tamaño fijo; las celdas se ajustan automáticamente a su contenido.

Ni siquiera tiene que establecer un ancho específico para las celdas, es table-layout: fixedsuficiente para distribuir las celdas de manera 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>

Tenga en cuenta que para table-layoutque funcione el elemento con estilo de tabla debe tener un ancho establecido (100% en mi ejemplo).

Solo use anchos de porcentaje y diseño de tabla fijo :

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

con

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

El diseño fijo de la tabla es importante ya que, de lo contrario, el navegador ajustará los anchos como mejor le parezca si el contenido no encaja, es decir, los anchos son una sugerencia, no una regla sin un diseño fijo de la tabla.

Obviamente, ajuste el CSS para que se adapte a sus circunstancias, lo que generalmente significa aplicar el estilo solo a tablas con una clase determinada o posiblemente con una ID determinada.

Usando table-layout: fixedcomo una propiedad de tabley width: calc(100%/3);para td( asumiendo que no 3 td's ). Con estas dos propiedades establecidas, las celdas de la tabla tendrán el mismo tamaño.

Consulte la demostración .