html - tablas - ¿Cómo creo bordes en las secciones tbody/thead de una tabla?
tablas html (2)
Estoy intentando crear una página con datos tabulares, que deben aparecer como varias tablas. Sin embargo, tengo dos requisitos contradictorios para moverme:
- Cada mesa debe tener un borde alrededor de ella.
- El ancho de las columnas de cada tabla debe poder cambiar el tamaño en función del contenido. Sin embargo, los anchos de columna deben ser consistentes en todas las tablas. (es decir, el tamaño de una columna se basa en la celda más grande de esa columna en todas las tablas).
Para manejar el segundo requisito, tengo una sola tabla de nivel superior que contiene múltiples secciones de thead y tbody. Esto logra # 2 bellamente. Esencialmente, he creado múltiples pseudo-tablas dentro de una tabla padre más grande, agrupadas como un único thead con un tbody acompañante:
<table>
<thead>
table1 header content...
</thead>
<tbody>
table1 body content...
</tbody>
<thead>
table2 header content...
</thead>
<tbody>
table2 body content...
</tbody>
</table>
Ahora, estoy tratando de abordar el primer requisito. Cada pseudo tabla debe tener un borde alrededor, haciéndose pasar por una tabla genuina.
He encontrado, para mi sorpresa, que IE 6/7 no permite agregar estilos de borde alrededor de las etiquetasad / tbody, o simplemente habría agregado un estilo de borde superior / izquierdo / derecho a thead y un borde inferior / izquierdo / derecho estilo a tbody.
Crear tablas genuinas y diseñar bordes para esas obras para resolver # 1, pero rompe # 2.
Otra alternativa sería usar estilos de primer hijo y último hijo para crear mis bordes. Desafortunadamente, esto no es bonito ni funciona en IE 6/7.
Otra alternativa que he estado buscando es crear un borde alrededor de toda la tabla e intentar crear una fila entre las pseudo-tablas que crea mi separación, pero aunque puedo crear bordes superiores e inferiores para que estén bien, todavía tengo que descubrir un significa borrar el borde izquierdo / derecho de la tabla solo para esa fila. ¿Es eso posible?
Mi última alternativa es crear clases para dibujar los bordes izquierdo, derecho, superior e inferior, estableciendo las celdas de la tabla apropiadas para usar estas clases. Sé que esto finalmente funcionará, pero es terriblemente torpe y hace un marcado realmente desordenado. Colgroups no puede guardarme aquí, ya que son incapaces de manejar estilos de borde. Eso es desafortunado, ya que haría que esta solución fuera un poco más fácil de manejar.
¿Hay algún método mejor para lograr las fronteras que me puedo haber perdido?
Vaya con el método para crear las tablas genuinas, luego intente esto.
Yo solo iría con la creación de tablas separadas. Supongamos que cada tabla se ve así:
<table>
<thead>
<tr>
<th class="column_1">Header 1</th>
<th class="column_2">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
...
</tbody>
</table>
Luego, use jQuery para establecer el ancho:
var columnOneWidth = 0; var columnTwoWidth = 0;
$(document).ready( function() {
$(".column_1").each( function() {
if( $(this).css("width") > columnOneWidth ) columnOneWidth = $(this).css("width");
});
$(".column_2").each( function() {
if( $(this).css("width") > columnTwoWidth ) columnTwoWidth = $(this).css("width");
});
$(".column_1").css({width: columnOneWidth + "px"});
$(".column_2").css({width: columnTwoWidth + "px"});
});
Todo lo que tiene que hacer es incluir el archivo jQuery Javascript (disponible en jquery.com) en su etiqueta principal:
<script type="text/javascript" src="scripts/my_jquery_file.js"></script>
use <table rules="groups"> o valores similares para las rules