查看大型表格时,HTML表格标题始终可见于窗口顶部

我想能够“调整”一个HTML表格的演示文稿添加一个单一的function:当向下滚动页面,使表格在屏幕上,但标题行不在屏幕上时,我希望标题保留在观看区域的顶部可见。

这在概念上就像Excel中的“冻结窗格”function。 但是,一个HTML页面可能包含多个表格,我只希望它发生在当前在视图中的表格中,而只在视图中。

注意:我已经看到了一个解决scheme,即表格数据区域可滚动,而标题不滚动。 这不是我正在寻找的解决scheme。

查看jQuery.floatTheaddemo可用 ),它非常酷,可以使用DataTables ,甚至可以在overflow: auto容器中工作。

我用jQuery做了一个概念validation的解决scheme。

在这里查看示例。

我现在已经在Mercurial bitbucket存储库中获得了这个代码。 主文件是tables.html

更新:我知道这个问题:如果表中包含锚点,并且如果您在浏览器中打开带有指定锚点的URL,则在页面加载时,带有锚点的行可能会被浮动标题遮挡。

Craig,我细化了一下你的代码(现在使用position:fixed的其他一些东西),然后把它封装成一个jQuery插件。

试试这里: http : //jsfiddle.net/jmosbech/stFcx/

在这里获取源代码: https : //github.com/jmosbech/StickyTableHeaders

可能的select

JS-浮表头

js-floating-table-headers (Google Code)

在Drupal中

我有一个Drupal 6网站。 我在pipe理“模块”页面,并注意到表具有这个确切的function!

看看代码,它似乎是由一个名为tableheader.js的文件实现的。 它将所有表上的function应用于sticky-enabledsticky-enabled

对于一个Drupal站点,我希望能够使用tableheader.js模块用于用户内容。 tableheader.js似乎不在Drupal的用户内容页面上。 我发布了一个论坛消息 ,询问如何修改Drupal主题,使其可用。 根据回复, tableheader.js可以在主题的template.php使用drupal_add_js()添加到Drupal主题中,如下所示:

 drupal_add_js('misc/tableheader.js', 'core'); 

我最近遇到这个问题。 不幸的是,我不得不做2个表格,一个表头和一个表格。 这可能不是有史以来最好的方法,但这里有:

 <html> <head> <title>oh hai</title> </head> <body> <table id="tableHeader"> <tr> <th style="width:100px; background-color:#CCCCCC">col header</th> <th style="width:100px; background-color:#CCCCCC">col header</th> </tr> </table> <div style="height:50px; overflow:auto; width:250px"> <table> <tr> <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td> <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td> </tr> <tr> <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td> <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td> </tr> </table> </div> </body> </html> 

在你的桌子上有一个棘手的标题这真是一件棘手的事情。 我有相同的要求,但与asp:GridView ,然后我发现它真的认为在GridView上有粘性头。 有很多解决scheme可用,并花了我3天试图解决所有的问题,但没有一个能够满足。

我遇到的大部分解决scheme的主要问题是alignment问题。 当您尝试使标题浮动时,标题单元格和正文单元格的alignment方式不起作用。

对于一些解决scheme,我也遇到了将头部重叠到正文的前几行,从而导致正文行隐藏在浮动头后面的问题。

所以现在我必须实现我自己的逻辑来实现这一点,虽然我也不认为这是完美的解决scheme,但这也可能有助于某人,

下面是示例表。

 <div class="table-holder"> <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable"> <thead> <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr> </thead> <tbody> <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr> <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr> <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr> <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr> <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr> <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr> <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr> <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr> <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr> <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr> </tbody> </table> </div> 

注意 :表格被封装到一个类属性等于'table-holder'的DIV中。

下面是我在我的HTML页面标题中添加的JQuery脚本。

 <script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //create var for table holder var originalTableHolder = $(".table-holder"); // set the table holder's with originalTableHolder.width($('table', originalTableHolder).width() + 17); // Create a clone of table holder DIV var clonedtableHolder = originalTableHolder.clone(); // Calculate height of all header rows. var headerHeight = 0; $('thead', originalTableHolder).each(function (index, element) { headerHeight = headerHeight + $(element).height(); }); // Set the position of cloned table so that cloned table overlapped the original clonedtableHolder.css('position', 'relative'); clonedtableHolder.css('top', headerHeight + 'px'); // Set the height of cloned header equal to header height only so that body is not visible of cloned header clonedtableHolder.height(headerHeight); clonedtableHolder.css('overflow', 'hidden'); // reset the ID attribute of each element in cloned table $('*', clonedtableHolder).each(function (index, element) { if ($(element).attr('id')) { $(element).attr('id', $(element).attr('id') + '_Cloned'); } }); originalTableHolder.css('border-bottom', '1px solid #aaa'); // Place the cloned table holder before original one originalTableHolder.before(clonedtableHolder); }); </script> 

最后在下面是一些着色目的的CSS类。

 .table-holder { height:200px; overflow:auto; border-width:0px; } .customerTable thead { background: #4b6c9e; color:White; } 

所以这个逻辑的全部概念是将表放置在表格持有者div中,并在页面加载时在客户端创build该持有者的克隆。 现在将表格的主体隐藏在克隆持有者中,并将剩余的标题部分放在原始标题上。

同样的解决scheme也适用于asp:gridview,你需要添加两个步骤来实现这个在gridview,

  1. 在Web页面中的GridView对象的OnPrerender事件中,将标题行的表部分设置为TableHeader。

     if (this.HeaderRow != null) { this.HeaderRow.TableSection = TableRowSection.TableHeader; } 
  2. 并把你的网格包裹到<div class="table-holder"></div>

注意 :如果你的头文件有可点击的控件,那么你可能需要添加一些jQuery脚本来将克隆头文件中产生的事件传递给原始头文件。 这个代码已经可以在由jmosbech创build的jQuery sticky-header插件中使用

使用display: fixedthead部分应该工作,但它只能在当前表中查看,您将需要JavaScript的帮助。 这将是棘手的,因为它需要弄清楚滚动的地方和元素的位置相对于浏览器,这是浏览器不兼容的主要地区之一。

看看stream行的JavaScript框架(jQuery,MooTools,YUI等),看他们是否可以做你想做的事情,或者更容易做你想做的事情。

如果你使用全屏表格,你可能有兴趣设置显示:fixed; 和top:0; 或通过CSS尝试一个非常类似的方法。

更新

只需快速build立一个与iframes(html4.0)的工作解决scheme。 这个例子不符合标准,但是你可以很容易地修复它:

outer.html

 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Outer</title> <body> <iframe src="test.html" width="200" height="100"></iframe> </body> </html> 

的test.html

 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Floating</title> <style type="text/css"> .content{ position:relative; } thead{ background-color:red; position:fixed; top:0; } </style> <body> <div class="content"> <table> <thead> <tr class="top"><td>Title</td></tr> </head> <tbody> <tr><td>a</td></tr> <tr><td>b</td></tr> <tr><td>c</td></tr> <tr><td>d</td></tr> <tr><td>e</td></tr> <tr><td>e</td></tr> <tr><td>e</td></tr> <tr><td>e</td></tr> <tr><td>e</td></tr> <tr><td>e</td></tr> </tbody> </table> </div> </body> </html> 

你提出的这个概念certificate是伟大的! 不过,我也发现这个jQuery插件似乎工作得很好。 希望它有帮助!

令人沮丧的是,在一个浏览器中出色的function在其他浏览器中不起作用。 以下在Fi​​refox中工作,但不在Chrome或IE中:

 <table width="80%"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody style="height:50px; overflow:auto"> <tr> <td>Cell A1</td> <td>Cell B1</td> <td>Cell C1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> <td>Cell C2</td> </tr> <tr> <td>Cell A3</td> <td>Cell B3</td> <td>Cell C3</td> </tr> </tbody> </table>