Aquí llego de nuevo para plantearos una cuestión que me tiene sin dormir desde hace un par de días.
Estoy trabajando en dar estilo a unas páginas para una aplicación. En todas las páginas aparecen datos tabulados de distintas formas y tengo tablas con cabecera en color, con cabecera y pie en color y con cabecera y un pie integrado en el que el contenido es el típico paginador para seleccionar la página a la que se quiere ir.
El código del paginador es algo así:
Código:
El estilo que tengo actualmente es algo así:<tfoot colspan="XXX">
<div>
<ul>
<!--Aquí los <li> con los enlaces en posición horizontal -->
</ul>
</div>
</tfoot>
Código:
table.tabla_recuadrada {
border-collapse: collapse;
}
/* todas las cabeceras iguales y los pies de pagina con totales */
/* las cabeceras y los pies normales estan recuadrados */
table.tabla_recuadrada thead, table.tabla_recuadrada tfoot.normal{
background-color: ... ;
font-size: ... ;
font-weight ... ;
border: 1px solid red;
}
/* el cuerpo esta recuadrado para poner el borde inferior de la tabla si no hay pie */
table.tabla_recuadrada tbody {
border: 1px solid red;
}
/* Las celdas tienen borde por los lados */
table.tabla_recuadrada th, table.tabla_recuadrada td {
border-left: 1px solid red;
border-right: 1px solid red;
}
/* El paginado esta dentro de la tabla, pero tiene que parecer que esta fuera */
/* No hay tablas que tengan pie normal y paginado */
table.tabla_recuadrada tfoot.paginacion, table.tabla_recuadrada tfoot.paginacion * {
border: 0 none;
}
Esto funciona bastante bien en el firefox y en IE8 (no he probado aún en Opera y Safari), pero en IE7 la cosa se complica, porque, según he leído, no aplica los estilos correctamente al tbody, por lo que en las tablas que no tienen pie normal no aparece el borde inferior. El superior aparece al aplicarle el estilo del thead y el inferior aparece si hay pie normal, por el estilo de tfoot normal. Los bordes me los están dando las celdas, que todas tienen borde izquierdo y derecho.
He aquí el problema.
Si le pongo estilo al table y le doy bordes allí, me recuadra la tabla entera, que es lo que quiero, pero cuando tengo una tabla con pie de estilo paginacion, me lo mete dentro de los bordes y no los quiero (borrar esos bordes de algona forma, la que sea, también me valdría.
He estado mirando cómo apañar esto. Por desgracia, el framework de programación que uso (un framework java muy raro, esto que hago son jsp) crea el html él solito, por lo que queda descartado usar comentarios condicionales, a no ser que puedan meterse dentro de la css. Creo que cogería el @import dentro de la css, pero no lo he probado aún. Y no he encontrado ningún hack que funcione correctamente con IE7 (Se supone que tendría que funcionar también con IE6, pero de momento me conformo con el 7, que ya es bastante...).
Bueno chavales, después de todo este rollo...
¿Cómo pensais que se puede solucionar este problema? No me gustaría tener distintos estilos para las tablas paginadas y las no paginadas, pero si no hay otra opción de que funcione estaría dispuesto a hacerlo.
¿Cómo colocais vosotros la paginación de las tablas, para que vaya todo como una unidad? Lo que quieren ver es, básicamente, que la lista <ul> con los enlaces de los número de página esté en el centro con respecto a cada tabla, teniendo en cuenta que las tablas no tienen por qué estar centradas en la pantalla.
¿Cómo podría borrar los bordes que quedan a la altura del tfoot y que vienen de la regla table.recuadrada dando estilo al tfoot? He probado con
border: 0 none; border-top: 1px solid red; y
border: 1px solid white; border-top: 1px solid red;
en el foot, pero eso junto al border-collapse: collapse; no me 'sobreescribe' los bordes de la otra regla.
¿Hay alguna propiedad que pueda usar que le de más precedencia a los bordes del tfoot que a los bordes del table?
Muchas gracias por vuestra ayuda y perdonad por el testamento que os he escrito.
Un saludo a todos.
