冻结html表格中的两行标题

Question

我创建了一个带有单个标题行的 HTML 表格，并应用了 CSS 中的逻辑来冻结它（位置：粘在第一个元素上）。它工作得很好，但后来我决定将标题分成两行，那时我的滚动失败了。标题的第二行滚动到第一行。

有没有办法用 CSS 来修复它？我在这里看到了一些使用 jquery 冻结行和列的解决方案，但我并不真正了解 jquery，所以我想知道是否有更简单的方法来做到这一点。

这是我的桌子：

 <table id="transformTbl">
    <thead>
      <tr class = "first">
        <th>Symbol</th>
        <th colspan="3">Expiration</th>
        <th colspan="5">Prior Days Prices</th>
        <th>Strike Price</th>
        <th colspan="2">Difference</th>
        <th colspan="3">Recovery</th>
      </tr>
      <tr class = "second">
        <th></th>
        <th>Date</th>
        <th>Weekday</th>
        <th>Price</th>
        <th>-1</th>
        <th>-2</th>
        <th>-3</th>
        <th>-4</th>
        <th>-5</th>
        <th></th>
        <th>$</th>
        <th>%</th>
        <th>Date</th>
        <th>Price</th>
        <th>Days</th>
      </tr>
    </thead>

这是我的 CSS：

table {
    border: 2px solid rgb(54, 7, 7);
    border-radius: 5px;
    background-color: #f8f8ff;
    width: auto;
    outline: 1px solid rgb(49, 1, 1);
}
th {
    position: sticky;
    top: 0;
    border-bottom: 2px solid #000;
    color: #e4f1e6;
    background-color: #031401;
    padding: 2px 2px;
    opacity: .70;
    font-size:15px;
    border-radius: 5px;
    z-index: 1;
}

请注意，我只包含了我的标题行的示例。我的表显然有 tbody 跟随 thead 和所有相应的 tr/td 元素，这些元素被 PHP 调用填充到 MySQL 存储过程。

滚动到顶部：

向下滚动：

谢谢

Answer 1

当table 标记中有多行标题时，由于 Chrome 中的existing issue，我们必须为第二行标题提供硬编码位置

.first th {
  position: sticky;
  top: 0px;
}

.second th {
  position: sticky;
  top: 45px;
}