固定行和列 HTML 表格，仅使用 CSS 进行水平垂直滚动答案

【问题标题】：Fixed rows and columns HTML table with horizontal vertical scrolling only with CSS固定行和列 HTML 表格，仅使用 CSS 进行水平垂直滚动
【发布时间】：2020-09-16 15:14:05
【问题描述】：

我想在水平和垂直轴上有一个可滚动的 HTML 表格。此外，在滚动时，我希望修复前两行和两列。

到目前为止，我可以在水平滚动时固定前两列，如下面的代码所示。

但是，我正在努力寻找一种方法来锁定前两行以进行垂直滚动。

我可以知道如何解决这个问题吗？

另外，我非常欢迎仅使用 CSS 的方法。谢谢

<html>
<head>
<style>
table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
/*  position:absolute;
  *position: relative; /*ie7*/
/*  left:0; */
  width:100px;
}
.hard_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.next_left {
  position:absolute;
  *position: relative; /*ie7*/
  left:100px; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:200px;
}
</style>
</head>
<body>

<div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th class="hard_left">Header A</th>
          <th class="next_left">Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
          <th>Header A</th>
          <th>Header B</th>
          <th>Header C</th>
          <th>Header D</th>
          <th>Header E</th>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - B</td>
          <td class="next_left">col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          
          <td class="hard_left">col 1 - C</td>
          <td class="next_left">col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
          <td>col 1 - A</td>
          <td>col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <td class="hard_left">col 1 - A</td>
          <td class="next_left">col 2 - A</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
    </table>
  </div>
</div>
</body>
</html>

【问题讨论】：

标签： css html-table

【解决方案1】：

添加此代码：

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

【讨论】：

答案需要更清晰，包括所有被问到的问题。
@amey，感谢您的回复，但粘贴以上行并不能修复任何列