带有两个标题行的粘性表格标题 [英] Sticky table header with two header rows

查看：21
本文介绍了带有两个标题行的粘性表格标题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

考虑以下表结构:

<table border="1px">
  <thead>
    <tr>
        <td rowspan="2">Item No</td>
        <th colspan="2">Store ABC</th>
        <th colspan="2">Store DEF</th>
    </tr>
    <tr>
        <th>Baskets</th>
        <th>Customers</th>
        <th>Baskets</th>
        <th>Customers</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

我想让表格标题具有粘性，以便在向下滚动表格时，它仍然可见.

I would like to make the table-header sticky so that when scrolling down the table, it remains visible.

当只有一个标题行时很容易.然而，当有两个时，事情会变得棘手.我想出了以下css:

Easy thing when there is only one header row. However, things get tricky when having two. I've come up with the following css:

thead th, thead td {
  position: sticky;
  top: 0;
  background: #eee;
}

它几乎"有效，除了在滚动表格时，两个标题行滑动"到同一位置，第二行位于第一行的顶部.

It "almost" works, except when scrolling the table, the two header rows kind of "slip" to the same position, the second row coming on top of the first one.

如何使两个标题行具有粘性，使其在向下滚动表格时外观不会改变(即整个标题保持一个块"并且它的两个不同的行保持原位)?

How to make the two header rows sticky in a way that their appearance is not changed when scrolling down the table (i.e. the whole header remains a "block" and its two distinct rows stay in place)?

强制jsFiddle:http://jsfiddle.net/juyvcLd6/3/

Mandatory jsFiddle: http://jsfiddle.net/juyvcLd6/3/

--- 更新

分别使用 class="first" 和 class="second" 标识两个标题行，并添加以下 css:

Identifying the two header rows with class="first" and class="second" respectively, plus adding the following css:

thead tr.first th, thead tr.first td {
  position: sticky;
  top: 0;
  background: #eee;
}

thead tr.second th, thead tr.second td {
  position: sticky;
  top: 17px;
  background: #eee;
}

具有在滚动表格时将标题行保持在一起的效果.但是，top: 17px 元素在很大程度上取决于行的实际渲染大小.例如，如果用户的浏览器以不同的方式呈现文本大小，那么一切都会消失.

has the effect of keeping the header rows together in place while scrolling the table. However, the top: 17px element is very much dependent on the actual rendered size of the row. If the user has its browser rendering text sizes differently, for instance, then everything will go off.

另外，这种方法的缺点是以一种非常奇怪的方式摆脱标题边框.

Plus, this method has the drawback of getting rid of header borders in quite a weird way.

在滚动表格时如何确保:

How to make sure that, when scrolling the table:

  1. 第二行的top: xxx规则实际上反映了第一行的真实高度?
  2. 边框与表格未滚动时的外观保持一致?
  1. the top: xxx rule for the second row actually reflects the real height of the first row?
  2. the borders stay consistent with what they look like when the table is not scrolled?

查看更新的 jsFiddle:http://jsfiddle.net/juyvcLd6/4/

See updated jsFiddle: http://jsfiddle.net/juyvcLd6/4/

推荐答案

您可以从 thead tr.second th, thead tr.second td 中删除 'top'并添加一个 jquery 来获取和设置第二个标题的高度

You can remove the 'top' from thead tr.second th, thead tr.second td and add a jquery for getting and setting height of second header

    $(document).ready(function() { 
        var firstheight = $('.first').height();
        $("thead tr.second th, thead tr.second td").css("top", firstheight)
    });

    table {
       height: 100%;
       border-collapse: collapse;
       width: 100%;
       margin: 10px;
       font-size: 0.8em;
   }

   thead tr.first th, thead tr.first td {
       position: sticky;
       position: -webkit-sticky; /* Safari */
       top: 0;
       background: #eee;
   }

   thead tr.second th, thead tr.second td {
       position: sticky;
       position: -webkit-sticky; /* Safari */
       background: #eee;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1px">
  <thead>
    <tr class="first">
        <td rowspan="2">Item No</td>
        <th colspan="2">Store ABC</th>
        <th colspan="2">Store DEF</th>
    </tr>
    <tr class="second">
        <th>Baskets</th>
        <th>Customers</th>
        <th>Baskets</th>
        <th>Customers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
    <tr>
      <th>123</th>
      <td>345</td>
      <td>345</td>
      <td>345</td>
      <td>345</td>
    </tr>
  </tbody>
</table>

这篇关于带有两个标题行的粘性表格标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆