0 FPS

Tablas automáticas y tablas fijas

12 de Enero del 2014 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : CSS, HTML, Programación, Responsive.

La web está en segundo plano, animación en pausa.

Cargando animación...

Cuando se necesita mostrar una gran cantidad de datos por la web se suele recurrir a tablas, pero las tablas por defecto calculan automáticamente el tamaño de las columnas, y no necesariamente tiene porque ser conveniente para nuestra tarea.

Desde el CSS 2.1 se puede modificar la forma en que la tabla calcula la disposición de columnas, para ello existe la propiedad table-layout.

Esta propiedad nos permite especificar si la tabla debe ser calculada automáticamente, o por el contrario tiene una disposición fija (todas las columnas fijas, excepto una columna variable).

Pongamos por caso que tenemos que mostrar una base de datos que contiene unas 200 filas con 3 columnas. Dos de las tres columnas tendrán datos que ocuparan unos 10 caracteres cada una, y la última columna contendrá una descripción que puede ser muy larga.

Lo mas lógico en este caso es hacer las dos primeras columnas de un ancho fijo de pongamos 100 pixeles, y la última columna ocupará como máximo el 100% del ancho restante.

Si os fijáis en las tablas, la primera es capaz de llegar a 400 pixeles de ancho sacrificando parte de la descripción. En cambio la otra, al ser de tamaño automático no se puede hacer mas pequeña.

Viendo el ejemplo anterior podemos ver que el modelo de tablas con una columna variable puede resultar muy adecuado para documentos responsive, ya que además no daña la apariencia de la lista creando múltiples líneas en algunos valores.

Declaración CSS

.MiTabla {
    border:1px solid #CCC;
    background:#FFF;
    white-space:nowrap;      /* Impide los saltos de línea automáticos */
}
/* Algoritmo de distribucion fijo */
.MiTablaFija { table-layout:fixed; }
/* Las dos primeras columnas de la tabla fija son de 120 pixeles de ancho */
.MiTablaFija td:nth-child(-n+2) {    width:120px; }
/* Celdas de la tabla */
.MiTabla td  {
    overflow:hidden;         /* Oculta el contenido que sobresale del contenedor */
    text-overflow:ellipsis;  /* Si el texto excede el tamaño del contenedor mostrará "..." al final */
}

Para las celdas de la tabla he utilizando la propiedad overflow que oculta el contenido que sobresaliente de la celda, y la propiedad text-overflow para indicar que si un texto sobresale del contenedor se deben mostrar tres puntos "..." al final indicando que hay mas texto que no se ve.

Maquetación HTML

<table class='MiTabla MiTablaFija'>
    <caption><code>table-layout:fixed</code></caption>
    <tr>
        <td>nombre de pila</td>
        <td>A-1234567890</td>
        <td>Descripción larga utilizada para explicar el valor.</td>
    </tr>
    <tr>
        <td>nombre de pila</td>
        <td>A-1234567890</td>
        <td>Descripción larga utilizada para explicar el valor.</td>
    </tr>
    <tr>
        <td>nombre de pila</td>
        <td>A-1234567890</td>
        <td>Descripción larga utilizada para explicar el valor.</td>
    </tr>
</table>                

Como veis la maquetación es de lo mas simple, y esto es todo por hoy, si quereis podeis echar un vistazo al ejemplo desde el laboratorio de pruebas.