Essayer de "synchroniser" 2 tables html (appliquer des largeurs de colonnes)

Question

J'ai 2 tables: table1 (la "table d'en-tête", qui n'a qu'une seule ligne avec des colonnes de table) - et table2 (la "table de données" ", qui a plusieurs lignes avec toutes les données).

La table 1 a des largeurs assignées à la plupart des colonnes. J'essaie maintenant d'appliquer les largeurs de colonnes de la table1 à la première ligne de la table2 (la table1 a la même largeur que la table2).

Mon code est:

var tr1 = $("tr",tblHeader).eq(0); // 1st row from header-table 
var tr2 = $("tr",tblData).eq(0); // 1st row from data-table 
var td2 = $("td",tr2);    // all cells from data-table 

$('td',tr1).each(function(i)  
{ 
    var td1 = $(this);    // table1 column header-cell 
    var width = (td1.css('width')); // column-width from header-table 
    td1.css('width',width+"px");  // apply width to header-table-cell 
    td2.eq(i).css('width',wi+"px"); // apply width to data-table-cell 
}); 

Le problème:
lors de la configuration td-padding dans mon css comme: table td{padding:0px;} tout fonctionne bien (les deux tables ont des largeurs de colonnes identiques). mais dès que je change de remplissage à quelque chose comme table td {padding:2px;padding-left:4px;padding-right:4px;} la table de données est foutu. Lors de la vérification des largeurs de colonnes avec firebug, toutes les colonnes ont la même largeur (table1 + table2) mais elles sont toujours différentes. Des idées sur ce qui pourrait être faux?

Answer 1

Pourquoi pas seulement une table, comme ceci:

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Country</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Mike</td> 
      <td>26</td> 
      <td>USA</td> 
     </tr> 
     <tr> 
      <td>Peter</td> 
      <td>27</td> 
      <td>Great Britain</td> 
     </tr> 
     <tr> 
      <td>Hans</td> 
      <td>26</td> 
      <td>Germany</td> 
     </tr> 
    </tbody> 
</table>