带有两个标题行的粘性表格标题

Question

考虑以下表结构：

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

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

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

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

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

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

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

---更新

分别用class="first"和标识两个标题行，并class="second"添加以下 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元素非常依赖于行的实际呈现大小。例如，如果用户的浏览器呈现不同的文本大小，那么一切都会消失。

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

滚动表格时如何确保：

1. top: xxx第二行的规则实际上反映了第一行的真实高度？
2. 边框与表格未滚动时的外观保持一致？

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

Answer 1

由于所有标题行都在 中thead，因此只需应用position: sticky;tothead而不是thead th, thead td。通过这种方式，您无需担心每个标题行的高度或有多少个标题行。

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

我对你的第一个示例进行了更改并且它有效。https://jsfiddle.net/qcuxkng5/

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

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

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

Answer 2

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

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