Tener la primera columna en la tabla HTML flexible cuando ancho de la tabla = 100%

Question

Tengo una tabla HTML con 8 columnas y varias filas. El contenido de cada celda se genera dinámicamente y es difícil predecir el ancho de cualquier columna. Establecí el ancho de la tabla = 100% porque me gustaría que la tabla ocupara todo el ancho del div. Me gustaría que las columnas 2 a 8 permanezcan iguales al ancho como si no hubiera configurado un ancho de tabla. Entonces me gustaría que la primera columna expanda su ancho para que el ancho de la mesa sea del 100%. es posible?

Answer 1

Establezca los anchos explícitos para 2 - 8 y la celda 1 determinará su propio ancho con el espacio restante. También puede establecer no-wrap para los espacios en blanco en la primera celda también para que el contenido no se ajuste, pero obligue a la celda a crecer cuando sea necesario.

Answer 2

Creo que su pregunta no está completa, porque literalmente la leyó, la respuesta es no establecer ningún ancho de columna en absoluto. Cada columna ocupará tanto espacio como desee, y de alguna manera lo distribuirán entre sí.

¿Puedes aclarar qué te gustaría lograr?

Answer 3

<div> 
<table width="100%"> 
<tr> 
<td width="100%"></td> <- this is col 1 
<td></td><td></td><td></td><td></td><td></td><td></td><td></td> <- cols 2-8 
</tr> 
</table> 
</div> 

mediante el establecimiento de la primera celda a 100%, que obligará a esa célula para tratar de ser lo más amplia posible, sin dejar de respetar las anchuras del resto de las células. Si las celdas 2-8 contienen texto, puede agregarlo para que el texto dentro de esas celdas no quede envuelto debido al intento de la primera celda de tener un ancho del 100%.

Answer 4

Establezca un ancho en la tabla y en todas las otras columnas; la columna restante ocupará toda la holgura.

El truco es utilizar el estilo table-layout: fixed para que el algoritmo de adivinación de diseño automático (y la interpretación especialmente mala de IE) no intervenga y lo arruine cuando hay cantidades de contenido mayores de lo esperado en una columna.

En el modo de diseño fijo, la primera fila de celdas o elementos <col> establece el ancho; más filas no afectan el ancho. Esto hace que renderizar sea más rápido; deberías usar un diseño fijo para cada mesa que puedas.

<table> 
    <col class="name" /><col class="data" /><col class="data" /><col class="data" /> 
    <col class="data" /><col class="data" /><col class="data" /><col class="data" /> 
    <tr> 
     <td>tiddle om pom pom</td> 
     <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
    </tr> 
</table> 

table { width: 100%; table-layout: fixed; } 
col.data { width: 2em; }