Synchronisation de la largeur des colonnes entre les tables dans deux cadres différents, etc

Question

Pour des raisons qui sont quelque peu inévitables (beaucoup de code hérité, la compatibilité, les besoins de conception) J'ai le problème suivant: J'ai deux tables, une directement sous l'autre , mais divisé entre deux cadres (voir le pseudo-exemple ci-dessous mon sig.). J'ai besoin que les largeurs de colonnes de ces tables se synchronisent exactement pour que ces deux tables "agissent" comme une seule. La raison en est d'avoir une table 'header' qui ne défilera pas au dessus d'une table 'data' qui pourra défiler.

Maintenant, il y a quelques suggestions évidentes qui ne fonctionnent pas (encore). Tout d'abord, j'ai entendu dire que l'utilisation de CSS permet de placer une barre de défilement juste sur les lignes de la table, et non sur l'en-tête de la table, ce qui est l'effet recherché ici. Malheureusement, ce n'est pas une option viable pour les raisons mentionnées ci-dessus.

Deuxièmement, la mise en forme de la largeur en pourcentage sur les colonnes. Malheureusement, la barre de défilement va gâcher cela, et cette solution partage également un problème avec la prochaine solution possible: le formatage en largeur de pixel. Ici, s'il y a du contenu de colonne qui est extra large, ces largeurs (px ou%) seront remplacées dans une table mais pas dans l'autre, et une largeur non concordante va casser -all- les alignements verticaux. Apparemment, corriger cela avec un CSS 'max-width' ne semble pas fonctionner.

La dernière solution possible consiste à utiliser une sorte de Javascript et DOM pour forcer dynamiquement le problème. Ici, le fait de forcer une largeur minimale sur chaque colonne et de forcer des largeurs de fond à remplacer les largeurs supérieures serait suffisant. Pourtant, la possibilité de diviser une table en deux tout en partageant le même modèle de colonne/rangée serait très agréable. Espérons que cette solution est faisable et pas extrêmement compliquée (pardon mon manque actuel de connaissance RE Javascript/DOM).

Merci,

Skolem

<!-- In frame 1 (top, non-scrolling): --> 
<table id="t1" ...> (Just the header, really) 
    <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td> 
    </tr> 
</table> 

<!-- In frame 2 (bottom, scrolling): --> 
<!-- table "t2" intended to have equal column widths --> 
<table id="t2" ...> (Data below the header) 
    <tr> 
    <!-- Lots of crazy stuff of wildly varying widths --> 
    <td>...</td><td>...</td><td>...</td><td>...</td> 
    </tr> 
</table> 

Answer 1

Tout d'abord, définir la largeur de la t1 à la largeur de t2. Ensuite, prenez chaque td de t1, et définissez sa largeur correspondant à la largeur des colonnes de t2. Essayez cette preuve de concept: http://jsfiddle.net/HqpGp/.

Vous aurez besoin de jQuery, et le modifier pour travailler avec des cadres, mais je pense que c'est un bon début. Je suis assez sûr que la partie JS pourrait être écrite d'une manière plus agréable, cependant.

J'espère que ça aide!

Answer 2

Je ne pouvais pas obtenir la réponse acceptée pour travailler directement, donc je l'ai retravaillé un peu, juste au cas où ça ne marcherait pas pour quelqu'un d'autre.

$('.table1 tr:eq(1) td').each(function (i) { 
       var _this = $(this); 
       $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width()); 
      });