带有两个粘性标题的表格答案

【问题标题】：Table with two sticky headers带有两个粘性标题的表格
【发布时间】：2021-05-27 22:24:00
【问题描述】：

我正在尝试创建一个带有两个粘性标题和一个左粘性列的表格，当我们滚动到水平时它工作正常，而垂直和水平滚动时，第二个标题（第二行与左列重叠）不起作用正确的，任何人都可以帮助我吗？我附上屏幕截图，这是工作链接。

JSFiddle 链接为：https://jsfiddle.net/rqpra89s/

【问题讨论】：

您不需要将整个缩小的 jQuery 复制并粘贴到您的 jsfiddle 中。您可以在“框架和扩展”部分将其导入到 javascript 配置中。
我遇到了另一个问题，当我看到您的表格 HTML 结构时，您“解决了”这个问题。我有与您类似的问题，并意识到您可以有两个表格标题行。

标签： jquery sticky

【解决方案1】：

看看我为你制作的这个版本。我只使用 css 来处理重要的东西，而且效果很好。我也在容器滚动上添加了一个使用 js 的类。

希望对你有帮助。

https://jsfiddle.net/bcwhqueu/3/

.table__side {
  left: 0; top: 0;
  position: absolute;
  transition: box-shadow 0.25s ease;
  width: 8.0625rem;
  z-index: 1;
}

【讨论】：

【解决方案2】：

这是仅使用 CSS 的 Column 和 Rows 粘性标题的示例。您可以查看更多信息here。

/* set some spacing (optional)*/

td,
th {
  padding: 20px;
}


/* style columns table headings*/

th[scope=col] {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: teal;
}


/* style columns headings first element*/

th[scope=col]:nth-of-type(1) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: peru;
}


/* style rows table headings*/

th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: chocolate;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sales</title>
</head>

<body>
  <h1>ACME Company</h1>
  <table>
    <tr>
      <th scope="col">Sales by Country</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
      <th scope="col">April</th>
      <th scope="col">May</th>
      <th scope="col">June</th>
      <th scope="col">July</th>
      <th scope="col">August</th>
      <th scope="col">September</th>
      <th scope="col">October</th>
      <th scope="col">November</th>
      <th scope="col">December</th>
    </tr>
    <tr>
      <th scope="row">Portugal</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Spain</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">France</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Germany</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Italy</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Poland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Austria</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">United States</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">England</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Scotland</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
    <tr>
      <th scope="row">Wales</th>
      <td>50.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
      <td>52.000</td>
    </tr>
  </table>

</body>

</html>

【讨论】：