代码之家 › 专栏 › 技术社区 › Craig McQueen Dr. Watson

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

html-table html

163

Craig McQueen Dr. Watson · 技术社区 · 15 年前

注意:我见过一种解决方案,其中表格数据区域可滚动,而标题不滚动。这不是我想要的解决方案。

11 回复 | 直到 11 年前

136

Craig McQueen Dr. Watson 7 年前

我已经使用 jQuery .

View sample here.

Mercurial bitbucket repository . 主文件是 tables.html

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

更新2017-12-11: 我发现这不适用于当前的Firefox(57)和Chrome(63)。不确定何时以及为什么停止工作,或者如何修复。但是现在,我认为 accepted answer by Hendy Irawan 他比我强。

Hendy Irawan 11 年前

jQuery.floatThead ( )这是非常酷的,可以工作 DataTables 也可以,甚至可以在 overflow: auto 容器

jmosbech 13 年前

Craig,我对你的代码做了一点改进(包括现在使用的position:fixed),并将其包装成一个jQuery插件。

在这里尝试一下: http://jsfiddle.net/jmosbech/stFcx/

并在此处获取来源: https://github.com/jmosbech/StickyTableHeaders

willy wonka 5 年前

如果您的目标是现代css3兼容浏览器( 浏览器支持: https://caniuse.com/#feat=css-sticky position:sticky ,它不需要JS,也不会破坏同一列的th和td的表布局。它也不需要固定的列宽才能正常工作。

单个标题行的示例:

thead th
{
    position: sticky;
    top: 0px;
}

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

你可能需要玩一下游戏顶部

而且,即使在同一页中有多个表,这两种解决方案也可以工作: th 当每个元素的顶部位置是css定义中指示的位置时,该元素开始变粘,当所有表向下滚动时,该元素消失。因此,如果有更多的表,所有的工作都很漂亮,同样的方式。

为什么要使用最后一个孩子之后在css中?

position:sticky的一个已知问题是它对AD元素或表行不起作用:必须以th元素为目标。这个问题将在未来的浏览器版本中解决。

Craig McQueen Dr. Watson 14 年前

js浮动表头

js-floating-table-headers (谷歌代码)

我有一个Drupal6站点。我在管理员“模块”页面上,注意到表格有这个确切的功能!

tableheader.js . 它在类的所有表上应用该功能 sticky-enabled .

对于Drupal站点,我希望能够利用它模块按原样用于用户内容。 tableheader.js 在Drupal的用户内容页上似乎不存在。我贴了一张 forum message tableheader.js 可以使用添加到Drupal主题 drupal_add_js() 在主题的 template.php

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

Sergej 9 年前

我最近遇到了这个问题。不幸的是,我不得不做两个表格,一个是标题,一个是正文。这可能不是最好的方法,但以下是:

<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>

这对我来说很有效,可能不是优雅的方式,但确实有效。我将进行调查,看看是否可以做得更好,但它允许使用多个表。

overflow 看它是否适合你的需要

David Castro 5 年前

最简单的答案只有使用CSS:D!!!

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* you could also change td instead th depending your html code */
  background-color: green;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>david</td>
       <td>castro</td>
       <td>rocks!</td>
     </tr>
  </tbody>
</table>

staticsan 15 年前

display: fixed 上 thead 节应该可以工作,但因为它只在视图中的当前表上工作,所以需要JavaScript的帮助。这将是一个棘手的问题,因为它需要找出元素相对于视口的滚动位置和位置,这是浏览器不兼容的主要方面之一。

marc_s HarisH Sharma 7 年前

这确实是一个棘手的事情,有一个粘性标题在您的表上。我也有同样的要求,但我不同意然后我发现它真的被认为在gridview上有粘性标题。有很多解决方案可用,我花了3天时间尝试所有的解决方案,但没有一个能满足我的要求。

我面对的大多数解决方案的主要问题是对齐问题。当您尝试使页眉浮动时,页眉单元格和主体单元格的对齐会偏离轨道。

通过一些解决方案,我还遇到了将标题重叠到正文的前几行的问题,这会导致正文行隐藏在浮动标题后面。

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

下面是示例表。

<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>

笔记 :该表被包装成一个DIV,其class属性等于“table holder”。

下面是我在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;
}

同样的解决方案也适用于asp:gridview,您需要再添加两个步骤才能在gridview中实现这一点,

在网页中gridview对象的OnPrerender事件中,将标题行的table部分设置为TableHeader。
```
if (this.HeaderRow != null)
{
    this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
```
<div class="table-holder"></div> .

笔记 :如果您的标头具有可单击控件,则可能需要添加更多jQuery脚本,以将克隆标头中引发的事件传递到原始标头。此代码已在jQuery sticky header插件create by中提供 jmosbech

merkuro 15 年前

如果您使用全屏表格,您可能会对设置th显示感兴趣:固定;和top:0;或者通过css尝试一种非常类似的方法。

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>

Marco 13 年前

proof of concept 你做的太棒了!但是我也发现 this jQuery plugin 看起来效果很好。希望有帮助!

Peter Dow 13 年前

<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>