Comment créer des bordures autour des sections tbody/thead d'une table?

Question

Je tente de créer une page avec des données tabulaires, qui doivent apparaître sous la forme de plusieurs tables. J'ai cependant deux exigences contradictoires à contourner:

1. Chaque table doit être entourée d'une bordure.
2. Les largeurs de colonne de chaque table doivent pouvoir être redimensionnées en fonction du contenu. Cependant, les largeurs de colonnes doivent être cohérentes dans toutes les tables. (c'est-à-dire que la taille d'une colonne est basée sur la plus grande cellule de cette colonne dans toutes les tables).

Pour répondre à la deuxième exigence, j'ai une seule table de niveau supérieur qui contient plusieurs sections de tête et de corps. Ceci accomplit magnifiquement # 2. Essentiellement, j'ai créé plusieurs pseudo-tables dans une table parent plus grande, regroupés en un seul thead avec un tbody accompagnant:

<table> 
    <thead> 
     table1 header content... 
    </thead> 
    <tbody> 
     table1 body content... 
    </tbody> 
    <thead> 
     table2 header content... 
    </thead> 
    <tbody> 
     table2 body content... 
    </tbody> 
</table> 

Maintenant, je tente de répondre à la première exigence. Chaque table pseudo doit avoir une bordure autour de lui, se faisant passer pour une table authentique. J'ai trouvé, à mon grand désarroi, que IE 6/7 ne permettait pas d'ajouter des styles de bordure autour des étiquettes de tête/tbody, ou j'aurais simplement ajouté un style de bordure haut/gauche/droite à la tête et un fond/style de bordure gauche/droite à tbody.

Création de véritables tables et bordures de style pour que ces travaux résolvent # 1, mais il casse # 2. Une autre solution consisterait à utiliser des styles first-child et last-child pour créer mes bordures. Malheureusement, ce n'est ni joli, ni cela fonctionne dans IE 6/7. Une autre alternative que j'ai recherchée est la création d'une bordure autour de la table entière et la tentative de créer une rangée entre les pseudo-tables qui crée ma séparation, mais pendant que je peux créer des frontières haut/bas pour cela ok, j'ai encore à découvrir un moyen d'effacer la bordure gauche/droite de la table pour cette seule ligne. Est-ce possible?

Mon dernier recours consiste à créer des classes pour dessiner les bordures gauche, droite, supérieure et inférieure, en définissant les cellules de tableau appropriées pour utiliser ces classes. Je sais que cela fonctionnera en fin de compte, mais il est horriblement maladroit et rend le balisage vraiment salissant. Les colgroups ne peuvent pas me sauver ici, car ils sont incapables de gérer les styles de bordure. C'est malheureux, car cela rendrait cette solution un peu plus facile à digérer.

Existe-t-il une meilleure méthode pour accomplir les bordures que j'ai peut-être manqué?

Answer 1

utilisation <table rules="groups"> ou des valeurs similaires pour rules

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

Answer 2

Aller à la méthode de création des tableaux authentiques, essayez cela.

Je voudrais juste créer des tables séparées.Supposons que chaque table ressemble à ceci:

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

Ensuite, utilisez jQuery pour définir la largeur:

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"}); 
}); 

Tout ce que vous avez à faire est d'inclure le fichier Javascript jQuery (disponible à partir jquery.com) dans votre balise de tête:

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