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

Question

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

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 solo se autoescriben para ajustarse a sus contenidos.

Answer 1

Sólo tiene que utilizar anchos de porcentaje y fixed table layout:

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

con

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

diseño de la mesa constante es importante ya que de lo contrario el navegador va a ajustar los anchos como lo considere oportuno si el contenido no se ajustan es decir, los anchos son, por lo demás, una sugerencia, no una regla sin un diseño de tabla fijo.

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

Answer 2

Ni siquiera tiene que establecer un ancho específico para las celdas, table-layout: fixed es suficiente para separar las celdas de manera uniforme. Vea esto jsfiddle, probado en IE8.

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

Answer 3

Usando table-layout: fixed como una propiedad para table y width: calc(100%/3); para td (suponiendo que son 3 'std). Con estas dos propiedades establecidas, las celdas de la tabla serán con el mismo tamaño.

Consulte demo.