使 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());
但它似乎无法正常工作。任何帮助表示赞赏。
I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用这个方法
<代码>
$(窗口).scroll(函数(){
$("表头的#id").offset({top:$("您放置滚动的控件的#id").scrollTop()});
});
Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});
为此创建了一个工作小提琴：
http://jsfiddle.net/terjeto/dx7H5/
当然，如果您的情况不同，您可能需要稍微调整一下。在我看来，有问题的区域是，如果表格使用动态或％宽度并处理占用大约18px的“自动”滚动条，当然，如果表格需要水平滚动条，则需要 onscroll 事件会使事情变得有点复杂。
难道你的例子由于缺少reset-css代码而不准确吗？
我用这个： http://developer.yahoo.com/yui/reset/
Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/