tablas - Tabla HTML: ancho de columna variable tanto fijo como múltiple

tabla html5 responsive ejemplos

Question

Tengo que construir una tabla con 5 columnas. El ancho de la tabla es variable (50% del ancho del contenido). Algunas columnas contienen botones de tamaño fijo, por lo que esas columnas deben tener un valor fijo, digamos 100px. Algunas columnas tienen texto, por lo que quiero que esas columnas tengan anchos de columna variables.

Por ejemplo:

Columna1: 20% de (ancho de la tabla - suma (columnas de ancho fijo)) ''

Columna2: 100px

Columna3: 40% de (ancho de tabla - suma (columnas de ancho fijo))

Columna4: 200px

Columna5: 40% de (ancho de la tabla - suma (columnas de ancho fijo))

¿Cuál es la mejor manera de lograr esto?

Answer 1

Puede establecer el table-layout: fixed la table-layout: fixed para el elemento de la table , luego simplemente establecer el atributo de width en elementos <td> o <th> relevantes:

table {
    table-layout: fixed;
}

Demostración JSFiddle .

Desde el MDN :

La propiedad CSS de table-layout define el algoritmo que se utilizará para diseñar las celdas, filas y columnas de la tabla.

Valores:

fijo:
Los anchos de tabla y columna se establecen por el ancho de los elementos de table y col o por el ancho de la primera fila de celdas. Las celdas en filas posteriores no afectan el ancho de las columnas.

Answer 2

para fijar el ancho en una tabla, necesita la propiedad de table-layout establecida en fixed; Como mezclas% y px, no será coherente.

Puede establecer solo el ancho de px y eventualmente un pequeño valor de% y dejar que otra columna use ancho disponible. ejemplo: http://jsfiddle.net/M4Et8/2/

<table style=''table-layout:fixed;width:100%'' border=''1''>
    <tr>
        <th style=''width: 20%;''>Column1</th>
        <th style=''width: 100px;''>Column2</th>
        <th >Column3</th>
        <th style=''width: 200px;''>Column4</th>
        <th >Column5</th>
    </tr>
</table>