使 2 个表的列宽相同答案

【问题标题】：Make column width same for 2 tables使 2 个表的列宽相同
【发布时间】：2012-03-06 18:39:06
【问题描述】：

我正在尝试实现一个表结构，其中当我向下滚动时标题保持固定。为此，我使用了 2 张桌子。第一个表具有标题值，第二个表具有相应的数据（每列中的数据长度可能会随着数据的动态填充而变化）。问题是标题宽度和数据列宽度不完全匹配。我已经编写了一些如下所示的代码来动态改变列宽

$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());

但它似乎无法正常工作。任何帮助表示赞赏。

【问题讨论】：

这不起作用，因为这个参数是最小宽度，在某些情况下宽度可以在某些行中更大，这会影响所有其他行。
是的..但是你知道如何解决这个问题吗？
您只能在 td 内放置 div，对 div 说剪切扩展它的内容，或类似的东西。如果您的宽度在某些情况下小于您的数据宽度，则很难使 2 个表具有相同的宽度。如果您有在线页面，我可能会看到更多您的问题。

标签： javascript jquery asp.net html-table

【解决方案1】：

为此创建了一个工作小提琴： http://jsfiddle.net/terjeto/dx7H5/

如果您的情况不同，您可能需要稍微调整一下。在我看来，有问题的区域是表格是否使用动态或百分比宽度并处理占用大约 18px 的“自动”滚动条，如果表格需要水平滚动条，它会使需要 onscroll 事件的事情变得复杂。

可能是因为缺少 reset-css 代码，您的示例不准确吗？我用这个：http://developer.yahoo.com/yui/reset/

【讨论】：

但问题是当我调整窗口大小时，所有对齐方式都发生了变化......当然，还有 %width 和“自动”滚动条的问题
好的。我知道了。猜猜这不是一个简单的答案。我的应用程序使用复杂的校准算法（onresize 和 onscroll）来确保表格单元格与标题（www.symphical.com）内联。但这种技术因情况而异。如果你用真实的内容和布局制作一个例子，我可能会提供帮助。

【解决方案2】：

使用这个方法 $(window).scroll(function(){ $("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()}); });

【讨论】：