jquery: trying to "sync" 2 html tables (apply column widths)

Question

hi,

i'm having 2 tables: table1 (the "header-table", which only has 1 row with table columns) - and table2 (the "data-table", which has several rows with all the data).

table1 has widhts assigned to most columns. i'm now trying to apply the column widths from table1 to the 1st row of table2 (table1 has same width as table2).

my code is:

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

the problem: when setting td-padding in my css like: table td{padding:0px;} it all works nice (both tables have identical column widhts). but as soon as i'm changing padding to something like table td {padding:2px;padding-left:4px;padding-right:4px;} the data table gets screwed up. when checking the columns-widths with firebug, all columns have the same width (table1+table2) but they still look different. any ideas what could be wrong?

thanks

Answer 1

Why not just one table, like so:

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