为Bootstrap表格添加横向滚动并实现列对齐

问题需求 #

• 当「Remaining candidates」列存在超长姓名（如Wolfeschlegelsteinhausenbergerdorfflastname, Wolfeschlegelsteinhausenbergerdorffffirstname）时，表格需显示横向滚动条
• 表头、表体、表尾的列需严格对齐
• 表尾的「TOTAL COUNT」需与「Excl 3 total」和「Overall % total」列对齐

修改步骤 #

1. 添加滚动容器 #

将整个表格区域包裹在带横向滚动的容器中，内容超出宽度时自动显示滚动条。

2. 统一列宽规则 #

为数值类列设置固定最小宽度，避免内容挤压；为「Remaining candidates」列设置足够的最小宽度以容纳长文本。

3. 修复表尾列对齐 #

调整表尾的列结构，使其与表头、表体的列位置完全匹配。

完整代码实现 #

CSS 样式 #

/* 新增滚动容器样式 */
.table-scroll-container {
  overflow-x: auto;
  width: 100%;
}

.align-items-center {
  align-items: center !important;
}

.total-count-row {
  background-color: #ebebeb;
  line-height: 1.5rem;
}

.table-data-column {
  padding: 8px !important;
  align-content: center;
}

.table-header-column,
.table-data-column {
  border-bottom: 2px solid #ebebeb;
}

.align-items-end {
  align-items: flex-end !important;
}

.body-md-bold {
  color: #1a1a1a;
  font: 700 16px / 24px 'Open Sans' !important;
}

.exclusion-header-column {
  padding: 12px;
  border-bottom: 2px solid #6E267B;
}

.exclusion-candidate-column {
  display: flex;
  padding: 0.75rem 0.5rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  border-right: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
}

/* 统一数值列最小宽度 */
.col-width-1 {
  min-width: 120px;
}

/* 为Remaining candidates列设置最小宽度 */
.remaining-candidates-col {
  min-width: 250px;
}

.exclusion-data-column {
  padding: 0.75rem 0.5rem;
  border-right: 1px solid #EBEBEB;
  border-bottom: 1px solid #EBEBEB;
}

HTML 结构 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>

<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <!-- 新增滚动容器 -->
        <div class="table-scroll-container">
          <div class="container-fluid exclusion-header-column">
            <div class="row align-items-end">
              <div class="col-3">
                <span class="body-md-bold">Excluded candidate</span>
              </div>
              <div class="col-1">
                <span class="d-flex justify-content-end body-md-bold text-right">Votes to <br />transfer</span>
              </div>
              <div class="col-8">
                <div class="row align-items-end">
                  <!-- 添加remaining-candidates-col类设置最小宽度 -->
                  <div class="col remaining-candidates-col">
                    <span class="body-md-bold">Remaining candidates</span>
                  </div>
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right">First pref<br /> total</span>
                  </div>
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right">Transfer <br />votes</span>
                  </div>
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right">Transfer % total</span>
                  </div>
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right">Excl 1 <br />total</span>
                  </div>
                  <div class="col col-width-1">
                    <span class="body-md-bold text-right d-flex justify-content-end">Overall % total</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="container-fluid">
            <div class="row align-items-center">
              <div class="col-3 exclusion-candidate-column">
                <div>
                  <div class="exclusion-candidate-name">
                    <span class="text-uppercase">Suresh Yadav</span>
                  </div>
                  <div class="text-uppercase exclusion-candidate-party">
                  </div>
                </div>
              </div>
              <div class="col-1 exclusion-candidate-column exclusion-highlighted-column justify-content-end">
                <span class="exclusion-count-bold">200</span>
              </div>
              <div class="col-8">
                <div class="row align-items-center">
                  <!-- 添加remaining-candidates-col类 -->
                  <div class="col remaining-candidates-col exclusion-data-column">
                    <div class="exclusion-candidate-name">
                      <!-- 测试超长文本 -->
                      <span class="text-uppercase">Wolfeschlegelsteinhausenbergerdorfflastname, Wolfeschlegelsteinhausenbergerdorffffirstname</span>
                    </div>
                  </div>
                  <div class="col col-width-1 exclusion-data-column">
                    <span class="d-flex justify-content-end text-right exclusion-previous-count">200</span>
                  </div>
                  <div class="col col-width-1 exclusion-data-column exclusion-highlighted-column">
                    <span class="d-flex justify-content-end text-right exclusion-count-bold">55</span>
                  </div>
                  <div class="col col-width-1 exclusion-data-column exclusion-highlighted-column">
                    <span class="body-md-reg d-flex justify-content-center">45%</span>
                  </div>
                  <div class="col col-width-1 exclusion-data-column">
                    <span class="d-flex justify-content-end text-right body-md-reg">75</span>
                  </div>
                  <div class="col col-width-1 exclusion-data-column">
                    <span class="d-flex justify-content-end body-md-reg text-right total-count-col">35%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="container-fluid table-data-column total-count-row">
            <div class="row align-items-center">
              <div class="col-4">
              </div>
              <div class="col-8">
                <div class="row align-items-end">
                  <!-- 空列对应Remaining candidates -->
                  <div class="col remaining-candidates-col">
                  </div>
                  <!-- 空列对应First pref total -->
                  <div class="col col-width-1">
                  </div>
                  <!-- 空列对应Transfer votes -->
                  <div class="col col-width-1">
                  </div>
                  <!-- 空列对应Transfer % total -->
                  <div class="col col-width-1">
                  </div>
                  <!-- TOTAL COUNT 对应Excl 1 total列 -->
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right text-uppercase">TOTAL COUNT</span>
                  </div>
                  <!-- 数值对应Overall % total列 -->
                  <div class="col col-width-1">
                    <span class="d-flex justify-content-end body-md-bold text-right total-count-col">75</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

关键说明 #

• table-scroll-container 实现横向滚动，确保表格超出容器宽度时显示滚动条
• col-width-1 固定数值列的最小宽度，避免列宽被挤压导致对齐错乱
• remaining-candidates-col 设置足够的最小宽度，容纳长姓名文本并触发滚动
• 表尾的列结构与表头、表体一一对应，确保「TOTAL COUNT」精准对齐目标列

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