在两个表上对齐列，其中一个表固定在适当位置

Question

我有两张桌子：

表1固定在位，因为我希望这是一个始终可见的标题。表2是我的数据表。

我讨厌固定宽度表的想法，所以我希望它动态构建，一旦完成，我将检查表的宽度并对齐它们。此外，我可以有1-40列，所以我不能有固定的宽度。

我的问题是表格列没有对齐 - 甚至没有关闭！？

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

我的Fiddle demo。您应该在其中一个搜索框中按Enter键以应用新宽度。

任何人都可以帮我调整两个表中的列吗？

Answer 1

我更新了小提琴以使其有效http://jsfiddle.net/u2w65/1/

基本上更新包括表格宽度更改。早期的表格宽度为100％，因此无论内容大小如何，表格都占据了完整的可用宽度并将其分布在各列中，因此您不知道每列的宽度是多少。

您还在使用.width进行大小调整时设置了列的宽度，这不起作用，因此将其更改为

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

还需要进行一项更改，因为td使用border-box作为框大小模型，因此需要在计算总宽度和单个宽度时测量包含边距的outerWidth。

var width = $(this).outerWidth(true);