首列固定的垂直滚动表格行宽与列不匹配问题求助

问题说明 #

实现了首列固定（采用sticky定位）的表格，需添加垂直滚动功能，当前代码接近需求，但存在表格行与列宽度不匹配的问题。

问题原因 #

1. 给<tbody>设置position: absolute，使其脱离表格正常布局流，导致tbody列宽计算与thead脱节
2. 未给表格设置固定布局模式，默认自动布局会让thead和tbody根据各自内容独立计算列宽，引发错位

修复方案 #

调整CSS结构，移除tbody的绝对定位，改用外层容器实现滚动，同时给表格添加固定布局保证列宽统一：

修复后的CSS #

.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
  z-index: 1; /* 确保首列滚动时不被其他内容覆盖 */
}

.table-container {
  height: 300px;
  overflow-y: auto;
}

table {
  width: 100%;
  table-layout: fixed; /* 固定布局，统一列宽计算逻辑 */
  border-collapse: collapse;
}

完整代码 #

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
  <style>
    .table th:first-child,
    .table td:first-child {
      position: sticky;
      left: 0;
      background-color: #ad6c80;
      color: #373737;
      z-index: 1;
    }

    .table-container {
      height: 300px;
      overflow-y: auto;
    }

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="table-container">
      <table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-show-columns="true">
        <thead>
          <tr>
            <th scope='col' data-sortable="true">Column 1</th>
            <th scope='col'>Column 2</th>
            <th scope='col'>Column 3</th>
            <th scope='col'>Column 4</th>
            <th scope='col'>Column 5</th>
            <th scope='col'>Column 6</th>
            <th scope='col'>Column 7</th>
            <th scope='col'>Column 8</th>
            <th scope='col'>Column 9</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail A</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
          <tr>
            <td>Conf</td>
            <td>even 20 trail B</td>
            <td>True</td>
            <td>False</td>
            <td>0</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
            <td>True</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js">
  </script>
  <script>
    $(document).ready(function() {
      $('table').bootstrapTable();
    });
  </script>
</body>

</html>

关键调整点 #

• 新增.table-container容器，将滚动效果转移到容器上，避免破坏表格原生布局
• 给表格添加table-layout: fixed，让列宽由表头统一计算，保证thead与tbody列宽完全匹配
• 给sticky定位的首列添加z-index: 1，防止滚动时被其他单元格遮挡

内容的提问来源于stack exchange，提问作者mHelpMe