Jquery 将两张桌子上的列对齐，其中一张桌子固定到位

我有两张桌子：

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

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

我的问题是表列没有对齐-甚至没有闭合

HTML:

字段1
字段2
资料
资料
资料
资料
.... [剪辑]

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

//这是表的最终布局（最大列获胜）
var arrLayout=[]；
//获取“header”表中第一行的列宽
$（“.header tr:first”）.find（“td”）.each（function（）{
var index=$（this.index（）；
var width=$（this.width（）；
arrLayout[索引]=宽度；
});
//获取“数据”表中第一行的列宽
$（“.data tr:first”）.find（“td”）.each（function（）{
var index=$（this.index（）；
var width=$（this.width（）；
//如果此列较大，请替代最终布局
如果（宽度>布局[索引]）{
arrLayout[索引]=宽度；
}
});
//总结最后的表格宽度
var widthSum=0；
对于（变量i=0；i

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

---

有人能帮我把这两张表中的列对齐吗？

我已经更新了小提琴，使它能工作

基本上更新包括表格宽度的更改。以前的表的宽度为100%，所以不管内容大小，表都占据了全部可用宽度，并将其分布在各个列中，所以您不知道每个列的宽度是否足够

您还在使用

.width

调整大小时设置了列的宽度，但该方法不起作用，因此将其更改为

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

由于td使用边框框作为框尺寸模型，因此需要在计算总宽度和单个宽度时测量包括边距在内的外径

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

---

它看起来99.99%很好，但如果您增加窗口大小，使所有列都可见，您会注意到数据表比标题表宽1倍。为什么会这样？这是因为头表并没有边框，但数据表有边框。如果我将

透明

颜色更改为

黑色

请检查此更新的边框，边框看起来很奇怪，因为它只在顶部和底部的第一个单元格中应用边框。但是好吧。。。它被设置为透明是有原因的（我就是不明白）。也许你也应该看看我的另一个问题，它主要基于这个问题；-）也许你也知道这个？

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