CSS para hacer una columna de la tabla ocupan tanto espacio como sea posible, y otros cols tan poco

StackOverflow https://stackoverflow.com/questions/118632

  •  02-07-2019
  •  | 
  •  

Pregunta

Necesito el diseño de un html datatable con CSS.

El contenido real de la mesa pueden variar, pero siempre hay una columna principal y 2 o más de las otras columnas.Me gustaría hacer la columna principal ocupan TANTO de ancho como sea posible, independientemente de su contenido, mientras que el resto de las columnas tomar tan poco ancho como sea posible.No se puede especificar el ancho exacto de cualquiera de las columnas debido a que su contenido puede cambiar.

¿Cómo puedo hacer esto con un simple semánticamente válido de la tabla html y css sólo?

Por ejemplo:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <--------> 
¿Fue útil?

Solución

Estoy lejos de ser un experto en CSS, pero esto funciona para mí (en IE, FF, Safari y Chrome):

td.zero_width {
    width: 1%;
}

Luego en el HTML:

<td class="zero_width">...</td>

Otros consejos

Similar a Alexk la solución, pero posiblemente sea un poco más fácil de implementar dependiendo de su situación:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

También puede ser que desee aplicar white-space:nowrap a las celdas si se quiere evitar la envoltura.

No he tenido éxito con width: 100%; como parece que sin un div contenedor que tiene un ancho fijo esto no va a obtener los resultados previstos.En lugar de eso utiliza algo como la siguiente y parece que me da mejores resultados.

.column-fill { min-width: 325px; }

De esta manera se puede obtener mayor si es necesario, y parece que el navegador le dará el espacio extra a la columna que se establece de esta manera.No estoy seguro si funciona para todos, pero lo hizo para mí en chrome (no he probado otros)...vale la pena un tiro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top