NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Tablas automáticas y tablas fijas

12 de Enero del 2014 por Josep Antoni Bover7389 visitas, 2 comentarios, 9 votos con una media de 4.44 sobre 5.
Categorías : CSS, HTML, Programación, Responsive.
La web está en segundo plano, animación en pausa.
Cargando animación...
Tablas automáticas y tablas fijas

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.

400px 700px
table-layout:fixed
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.

table-layout:auto
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.
nombre de pila A-1234567890 Descripción larga utilizada para explicar el valor.

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.

En los ejemplos he utilizado la propiedad white-space para evitar que cree mas de una línea de texto por <tr>. Normalmente el texto se cortaría en varias líneas, y eso estéticamente a veces resulta muy molesto.

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

CSS para la tabla fija
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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

Código HTML para la tabla fija
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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.


[#2] devildrey33 09 Septiembre del 2015 a las 10:47, votos 0 de 0.
1 Buenas pedro, por lo que entendí en tu comentario lo que quieres es que la tabla ocupe el 100% de alto como mínimo. Por desgracia la tabla al usar un display:table, no permite un height:100% o min-height:100% solo admite tamaños fijos (en pixeles por ejemplo), por lo que vas a tener que poner el tamaño manualmente en pixeles.

Tal vez haciendo la tabla manualmente puedas hacer lo que quieres, me explico, en vez de usar las etiquetas table, tr y td, usar etiquetas div y establecer su display a parte.

Asi de pronto no se me ocurre otra forma de hacer lo que quieres, quizás si me enseñas un ejemplo te puedo guiar un poco mejor.

Espero que te sirva de ayuda, Saludos!
[#1] Pedro Beltran 09 Septiembre del 2015 a las 3:06, votos 0 de 0.
Hola estoy tomando tu ejemplo y me parece perfecto, ahora me gustaria saber como poner una alto fijo a cada fila ya que
 necesito tener una tabla con determinado alto pero si tengo pocas filas el tamaño de las filas se distribuye en en todo lo alto de la
tabla y necesito que queden los datos hasta arriba sin importar que la tabla de mas grande(alto), espero que entiendas lo que trate de explicar 

Gracias