如何同时冻结 HTML 表格的顶部 <th> 和左侧 <th>答案

【问题标题】：How to freeze the top <th> and left <th> of an HTML table at the same time如何同时冻结 HTML 表格的顶部 <th> 和左侧 <th>
【发布时间】：2020-07-06 09:19:47
【问题描述】：

我在整个页面中显示了以下长表（从数据库动态生成）。由于表格的长度，它具有垂直和水平滚动条。

我可以使用以下CSS 代码将标题固定在固定位置

table {
  border-spacing: 0;
  width: 100%;
  overflow-y: auto;
  height: 50vh;
}

thead th {
  position: sticky;
  top: 0;
  background-color: white;
}

但我也想冻结左侧th，这样当我滚动水平滚动条时，我仍然可以看到最左边的列。有人知道怎么做吗？

编辑 1

我提到的表格是动态生成的。所以我不能粘贴原始代码，因为它包含php 和MySQL 的混合。所以作为参考，我正在粘贴一个引导表来工作

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

请同时发布您的 HTML 代码。
其实是一个动态表，有php和MySQL代码。如果我把它贴在这里，我认为它只会混淆。我们可以考虑一个普通的HTML 表来查看它。可能我会发布一个简单的HTML 表的代码。
使用数据表可以找到可能的解决方案。这是一个 JS 解决方案，所以它可能不是您想要的，但请查看 datatables.net/extensions/fixedcolumns/examples
查看this 帖子可能对您有帮助
所提供的所有解决方案的问题是，它们都集中在一种类型的滚动上。我需要的是，当我垂直滚动时，顶部标题必须有一个冻结，在此期间左窗格也应该垂直向上移动，以便表格中的数据显示正确。在我水平滚动的同时，左侧面板也必须冻结。

标签： html css html-table

【解决方案1】：

您可以使用 2 个表，
一个用于左列，第二个用于其余列以实现此效果。

演示：Freeze left column

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .tbls-cont{
        display:block;
        background-color:green;
        overflow:auto;
        width:100%;
      }
      .lft{
        position:fixed;
        background-color:red;
        margin-right:5px;
        width:10%;
      }
      .rgt{
        width:90%;
        float:right;
      }
    </style>
  </head>
  <body>
    <div class='tbls-cont' id='main_cont'>
      <div class='lft' id='sub-cont-lft'>
        <table class="table table-hover static" id='left_tbl'>
          <thead>
            <tr>
              <th scope="col">#
              </th>
              <th scope="col">First
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1
              </th>
              <td>Mark
              </td>
            </tr>
            <tr>
              <th scope="row">2
              </th>
              <td>Jacob
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class='rgt' id='sub-cont-rgt'>
        <table class="table table-hover" id='right_tbl'>
          <thead>
            <tr>
              <th scope="col">Last
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
              <th scope="col">Handle
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Otto
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
              <td>@mdo
              </td>
            </tr>
            <tr>          
              <td>Thornton
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
              <td>@fat
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

编辑：

我认为您需要一个外部库，请查看：github.com/yidas/jquery-freeze-table，我认为它会解决您的问题。

【讨论】：

这样的问题是，当我进行垂直滚动时，我们看到的各个数据将是错误的，因为左窗格将保持在固定位置
你可以在这里看到问题jsbin.com/gozifoqawi/edit?html,output
@Anu 是的，我明白了，等一下，让我为你想一个解决方案，我们这里可能需要 JS，
好的，我想你需要一个外部库，检查一下：github.com/yidas/jquery-freeze-table，我想它会解决你的问题。
谢谢。这个外部库可以很好地与顶部和左侧窗格冻结