Aligning columns on two tables where one table is fixed in position

Problem

I have two tables:

Two tables

Table 1 is fixed in position as I want this as an always-visible header. Table 2 is my data table.

I hate the idea of fixed-widths tables so I want it to build dynamically and once finished I will check the width of the tables and align them. Furthermore I can have from 1-40 columns so I cannot have a fixed width.

My problem is that the table columns are not aligning - not even close!?

HTML:

<!-- Fixed positioned header -->
<table class="table table-bordered table-condensed navbar navbar-fixed-top nowrap header">
    <tr>
        <td><input type="text" size="1" /></td>
        <td><input type="text" size="1" /></td>
    </tr>
    <tr>
        <td>Field 1</td>
        <td>Field 2</td>
    </tr>
</table>

<!-- Data table -->
<table class="table table-bordered table-hover table-condensed nowrap data">
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td> .... [CUT]
</table>

Javascript/jQuery:

// This is the final layout for the table (biggest column wins)
var arrLayout = [];

// Get the column widths in the first row in the "header" table
$(".header tr:first").find("td").each(function() {
    var index = $(this).index();
    var width = $(this).width();
    arrLayout[index] = width;
});

// Get the column widths in the first row in the "data" table
$(".data tr:first").find("td").each(function() {
    var index = $(this).index();
    var width = $(this).width();
    // Override the final layout if this column is bigger
    if(width > arrLayout[index]) {
        arrLayout[index] = width;
    }
});

// Summarize the final table width
var widthSum = 0;
for(var i=0; i < arrLayout.length; i++) {
    widthSum += arrLayout[i];
}

// Set the new width to the two tables        
$(".header").width(widthSum);
$(".data").width(widthSum);

// Set the new widths on the columns (both tables)
for(var i=0; i < arrLayout.length; i++) {
    $(".header tr:first td:eq("+i+")").width(arrLayout[i]);
    $(".data tr:first td:eq("+i+")").width(arrLayout[i]);
}

My Fiddle demo. You should hit ENTER in one of the search boxes to apply the new widths.

Can anyone help me aligning the columns in the two tables?

Problem courtesy of: DHS

Solution

I have updated the fiddle to make it work http://jsfiddle.net/u2w65/1/

Basically updates include table width change. Earlier table had width of 100% so regardless of content size tables were occupying full available width and distributing it across columns so you don't know how much width is enough for each column.

You were also setting width of columns while resizing using .width which doesn't work so changed it to

$(elem).css({"min-width":width});

One more change was needed as td's are using border-box as box sizing model so need to measure outerWidth including margin while calculating total and individual widths.

var width = $(this).outerWidth(true);
Solution courtesy of: amitamb

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.