可滚动表的想法（棘手） [英] Scrollable table ideas (tricky)

问题描述

我一直在摔跤这一段时间了。假设我有一个有许多行和许多列的表（垂直和水平地溢出页面）。我想修正第一行（thead）到位。

捕获：我希望垂直和水平滚动条始终可见。即，我不希望用户必须水平滚动才能找到垂直滚动条，反之亦然。

我最好的想法是分割thead和tbody分成两个独立的表，同步滚动，但这会产生对齐和匹配单元格宽度的问题，所以我宁愿不。

解决方案

对任何想要达到类似效果的人：

使用 width：100％; 和 overflow：auto; 将表格封装在div中。 >

复制表的头部分，并创建一个只包含该表的新表。位置这个表是绝对的！ （ position：absolute; ）

将标题表放置在与真实表相同的div中。 （它应该完全适合原来的标题部分）。

使用jQuery来管理div的滚动并将标题粘贴到位...

  jQuery（document）.ready（function（）{
 jQuery（'＃tableDiv'）。scroll $ b jQuery（'＃copiedHeaderTable'）。css（'top'，jQuery（this）.scrollTop（））; 
}）; 
}）
  
 
 
 
这个解决方案当然会对您的需求做一些假设，但有一些优点（简单性是主要的）。
 
 
 
 编辑要确保匹配的单元格宽度，请在div中包含所有th个内容，然后在克隆前手动设置每个div的宽度：
  jQuery（'＃headerRow th div'）。each（function（）{
 jQuery（this）.css（'width'，jQuery（this）。 parent（）[0] .offsetWidth +'px'）; 
}）; 
  
 
I've been wrestling with this for some time now. Say that I have a table that has many rows and many columns (overflows the page vertically and horizontally). I want to fix the first row (thead) in place.

The catch: I want the vertical and horizontal scrollbars to ALWAYS be visible. i.e., I don't want the user to have to scroll horizontally to find the vertical scroll bar, and vice versa.

The best I could come up with is to split the thead and tbody into two separate tables with synchronized scrolling, but this creates problems with alignment and matching cell widths, so I'd rather not.

How would you go about solving this?
解决方案
To anyone who wants to achieve a similar effect:

Wrap your table in a div with width:100%; and overflow:auto;.

Copy the header portion of your table and create a new table with just that in it. POSITION THIS TABLE AS ABSOLUTE! (position:absolute;)

Place your header table in the same div as the real table. (It should fit perfectly over the original header portion).

Use jQuery to manage the scrolling of the div and stick the header in place...
jQuery(document).ready(function() {
    jQuery('#tableDiv').scroll(function() {
        jQuery('#copiedHeaderTable').css('top', jQuery(this).scrollTop());
    });
})
This solution of course makes a few assumptions about your requirements, but has a few advantages (simplicity being the main).

Edit To ensure matching cell widths, wrap all th contents in a div and set the width of each div manually before the cloning:
jQuery('#headerRow th div').each(function() {
    jQuery(this).css('width', jQuery(this).parent()[0].offsetWidth+'px');
});


                        
这篇关于可滚动表的想法（棘手）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！