如何拆分表格并添加滚动条？Bootstrap5.3.3+Handlebars固定列实现

我正在开发一个Node.js Web项目，使用Bootstrap 5.3.3和Handlebars框架。已在页面中添加表格，需要实现以下效果：

• 表格前3列固定在左侧
• 右侧操作按钮列固定
• 中间其余列添加横向滚动条

现有代码片段 #

<div class="table-responsive mt-4">
   <table class="table table-striped">
      <thead>
         <tr>
            <th>ID</th>
            <th>Ürün</th>
            <th>Son Güncellenme Tarihi</th>
            {{#each sizes}}
            <th>{{this}}</th>
            {{/each}}
            <th></th>
         </tr>
      </thead>
      <tbody>
         {{#each spareParts}}
         <tr>
            <td>{{this.id}}</td>
            <td>{{this.item}}</td>
            <td>{{this.last_updated}}</td>
            {{#each this.quantities}}
            <td>{{this}}</td>
            {{/each}}
            <td>
               <button type="button" class="btn btn-warning" data-bs-toggle="modal"
                  data-bs-target="#updateModal" data-id="{{this.id}}" data-item="{{this.item}}">
               Güncelle
               </button>
               <form action="/spare-parts/delete/{{this.id}}" method="POST" style="display:inline-block;">
                  <button type="submit" class="btn btn-danger px-4">Sil</button>
               </form>
            </td>
         </tr>
         {{/each}}
      </tbody>
   </table>
</div>

效果截图 #

解决方案 #

通过自定义CSS结合Bootstrap布局调整，实现固定列+中间滚动的效果，步骤如下：

1. 调整HTML结构 #

将表格拆分为左侧固定列、中间滚动列、右侧固定操作列三部分，给对应区块添加类名便于样式控制：

<div class="table-container mt-4" style="position: relative; overflow: hidden;">
  <!-- 左侧固定列 -->
  <div class="fixed-left-cols" style="position: absolute; left: 0; top: 0; bottom: 0; background: white; z-index: 1;">
    <table class="table table-striped mb-0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Ürün</th>
          <th>Son Güncellenme Tarihi</th>
        </tr>
      </thead>
      <tbody>
        {{#each spareParts}}
        <tr>
          <td>{{this.id}}</td>
          <td>{{this.item}}</td>
          <td>{{this.last_updated}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

  <!-- 中间滚动列 -->
  <div class="scrollable-cols" style="margin-left: 300px; margin-right: 180px; overflow-x: auto;">
    <table class="table table-striped mb-0">
      <thead>
        <tr>
          {{#each sizes}}
          <th>{{this}}</th>
          {{/each}}
        </tr>
      </thead>
      <tbody>
        {{#each spareParts}}
        <tr>
          {{#each this.quantities}}
          <td>{{this}}</td>
          {{/each}}
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>

  <!-- 右侧固定操作列 -->
  <div class="fixed-right-col" style="position: absolute; right: 0; top: 0; bottom: 0; background: white; z-index: 1;">
    <table class="table table-striped mb-0">
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {{#each spareParts}}
        <tr>
          <td>
            <button type="button" class="btn btn-warning" data-bs-toggle="modal"
              data-bs-target="#updateModal" data-id="{{this.id}}" data-item="{{this.item}}">
            Güncelle
            </button>
            <form action="/spare-parts/delete/{{this.id}}" method="POST" style="display:inline-block;">
              <button type="submit" class="btn btn-danger px-4">Sil</button>
            </form>
          </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
</div>

2. 添加自定义CSS（建议放入外部样式文件） #

/* 统一表格单元格样式，避免错位 */
.fixed-left-cols table,
.scrollable-cols table,
.fixed-right-col table {
  border-collapse: separate;
  border-spacing: 0;
}

.fixed-left-cols th,
.fixed-left-cols td,
.fixed-right-col th,
.fixed-right-col td {
  border-right: 1px solid #dee2e6;
  white-space: nowrap; /* 防止内容换行破坏布局 */
}

.scrollable-cols th,
.scrollable-cols td {
  border-left: none;
  border-right: none;
}

/* 统一行高，保证三部分表格对齐 */
.table-container thead tr,
.table-container tbody tr {
  height: 60px; /* 根据实际内容调整 */
}

/* 响应式适配 */
@media (max-width: 768px) {
  .fixed-left-cols {
    width: 200px;
  }
  .scrollable-cols {
    margin-left: 200px;
    margin-right: 150px;
  }
  .fixed-right-col {
    width: 150px;
  }
}

关键说明 #

• 利用绝对定位固定左右列，中间区域设置margin留出固定列空间并开启横向滚动
• 拆分后的三个表格需保持行高一致，避免出现错位
• white-space: nowrap确保固定列内容不换行，维持布局稳定性
• 媒体查询可根据屏幕尺寸调整固定列宽度和中间区域边距，适配移动端

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