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

查看：63 发布时间：2020/11/24 5:13:27 html css html-table sticky

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

问题描述

考虑以下表格结构:

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

滚动表时如何确保:

第二行的top: xxx规则实际上反映了第一行的 real 高度吗?
边框不与表格滚动时的外观保持一致吗?

the top: xxx rule for the second row actually reflects the real height of the first row?
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 中删除顶部" 并添加一个用于获取和设置第二个标题的高度的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屋！

查看全文

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

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

推荐答案

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭