¿Cómo creo bordes en las secciones tbody/thead de una tabla?

Question

Estoy intentando crear una página con datos tabulares, que deben aparecer como varias tablas. Sin embargo, tengo dos requisitos conflictivos para solucionar:

1. Cada tabla debe tener un borde alrededor.
2. El ancho de columna de cada tabla debe poder cambiar el tamaño según el 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 varios pseudo-tablas dentro de una tabla padre más grande, agrupados como una sola culata en T con un tbody acompaña:

<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 añadir estilos de borde alrededor de las etiquetasad/tbody, o simplemente habría agregado un estilo de borde superior/izquierdo/derecho a thead y un bottom/estilo de borde izquierdo/derecho para tbody.

Creando tablas genuinas y bordes de estilo para esos trabajos para resolver # 1, pero rompe # 2.

Otra alternativa sería utilizar 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 si bien puedo crear bordes superiores e inferiores para ello, tengo aún para descubrir un medio para 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, configurando 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.

¿Existe algún método mejor para lograr los bordes que me puedo haber perdido?

Answer 1

uso <table rules="groups"> o valores similares para rules

ver http://www.w3.org/TR/html4/struct/tables.html#h-11.3.1

Answer 2

ir con el método para crear las tablas verdaderas, entonces prueba este.

Simplemente me gustaría crear tablas separadas.Supongamos que cada tabla es el siguiente:

<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> 

Entonces, usar 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 de jQuery Javascript (disponible en jquery.com) en su etiqueta de la cabeza:

<script type="text/javascript" src="scripts/my_jquery_file.js"></script>