如何创建左右列固定、中间主体可滚动的表格？

针对你要实现仅表格内可滚动内容区域显示底部滚动条的需求，下面是调整后的代码方案，同时保留你原有的左右冻结列功能：

核心修改说明 #

1. 给外层容器添加水平滚动控制，让滚动条只出现在容器底部
2. 优化表格宽度逻辑，确保内容超出时触发滚动
3. 修正冻结列的定位计算，避免滚动时错位
4. 统一边框样式，移除HTML中重复的border属性

修改后的CSS代码 #

.table-scroll {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  height: 50vh;
  overflow-x: auto; /* 关键：仅在容器底部显示水平滚动条 */
  overflow-y: auto; /* 垂直滚动根据内容高度触发 */
}

.table-scroll table {
  width: min-content; /* 让表格宽度由内容决定，超出容器时触发滚动 */
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
  text-align: center;
  min-width: 80px; /* 给单元格设置最小宽度，避免内容挤压 */
}

.table-scroll thead th {
  background: #333;
  color: #fff;
  position: sticky; /* 表头顶部冻结 */
  top: 0;
  z-index: 2;
}

th.sticky-left,
td.sticky-left {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #ccc;
}

th.sticky-left:nth-child(2),
td.sticky-left:nth-child(2) {
  left: calc(80px + 2px); /* 基于第一个冻结列的宽度+边框计算定位 */
  z-index: 5;
  background: #ccc;
}

th.sticky-right,
td.sticky-right {
  position: sticky;
  right: 0;
  z-index: 4;
  background: #ccc;
}

修改后的HTML代码 #

<div class="table-scroll">
  <table>
    <thead>
      <tr>
        <th class="sticky-left" rowspan="2">DATE</th>
        <th class="sticky-left" rowspan="2">DATE2</th>
        <th colspan="10">LINE 1</th>
        <th colspan="10">LINE 2</th>
        <th class="sticky-right" rowspan="2">LINE 3</th>
      </tr>
      <tr>
        <th>SENSOR 1</th>
        <th>SENSOR 2</th>
        <th>SENSOR 3</th>
        <th>SENSOR 4</th>
        <th>SENSOR 5</th>
        <th>SENSOR 6</th>
        <th>SENSOR 7</th>
        <th>SENSOR 8</th>
        <th>SENSOR 9</th>
        <th>SENSOR 10</th>
        <th>SENSOR 1</th>
        <th>SENSOR 2</th>
        <th>SENSOR 3</th>
        <th>SENSOR 4</th>
        <th>SENSOR 5</th>
        <th>SENSOR 6</th>
        <th>SENSOR 7</th>
        <th>SENSOR 8</th>
        <th>SENSOR 9</th>
        <th>SENSOR 10</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="sticky-left">VALUE 1</td>
        <td class="sticky-left">VALUE 1</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td class="sticky-right">VALUE 1</td>
      </tr>
      <tr>
        <td class="sticky-left">VALUE 2</td>
        <td class="sticky-left">VALUE 2</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td class="sticky-right">VALUE 2</td>
      </tr>
      <tr>
        <td class="sticky-left">VALUE 1</td>
        <td class="sticky-left">VALUE 1</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td>SENSOR DATA 1</td>
        <td>SENSOR DATA 2</td>
        <td>SENSOR DATA 3</td>
        <td>SENSOR DATA 4</td>
        <td>SENSOR DATA 5</td>
        <td>SENSOR DATA 6</td>
        <td>SENSOR DATA 7</td>
        <td>SENSOR DATA 8</td>
        <td>SENSOR DATA 9</td>
        <td>SENSOR DATA 10</td>
        <td class="sticky-right">VALUE 1</td>
      </tr>
    </tbody>
  </table>
</div>

效果说明 #

• 水平滚动条仅出现在.table-scroll容器的底部，不会影响整个页面或表格的其他部分
• 左右两列固定冻结，滚动时保持可见
• 表头顶部冻结，垂直滚动时始终显示
• 表格内容超出容器宽度时自动触发滚动，不会导致表格变形

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