html - sirve - Celdas de tabla de igual tamaño para llenar todo el ancho de la mesa de espera

tablas en html ejemplos

Question

¿Hay alguna manera 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 externa 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

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

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

Answer 2

Simplemente use los anchos de porcentaje y el 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 de tabla fija es importante ya que de lo contrario el navegador ajustará los anchos como lo considere adecuado si el contenido no se ajusta, es decir, los anchos son 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 3

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

Consulte la demo .