Bootstrap模态框内嵌表格宽度适配及滚动异常问题求解

• 调整模态框基础布局：模态框内容区使用Bootstrap栅格实现两列布局，给.modal-body设置max-height: 80vh、overflow-y: auto，确保整体内容超出时可正常垂直滚动，同时设置overflow-x: hidden避免横向滚动条异常出现。
• 表格适配列宽配置：放置表格的列容器外层包裹Bootstrap原生的table-responsive类，给表格添加w-100类占满父容器宽度，同时补充自定义样式强制单元格内容自动折行，避免内容过长撑宽表格：

.modal-inner-table th, .modal-inner-table td {
  word-break: break-all;
  white-space: normal;
}

• 避免滚动冲突：不要给表格外层的table-responsive设置固定高度，仅保留其默认的横向溢出滚动能力，配合modal-body的全局垂直滚动即可避免嵌套滚动异常。

完整代码示例 #

模态框触发按钮 #

<div class="btn-group d-flex">
   <button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
      <span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
      <span class="btn-inner--text">Pay</span>
   </button>
</div>

模态框主体代码 #

<div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default-label" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-default-label">支付信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="max-height: 80vh; overflow-y: auto; overflow-x: hidden;">
        <div class="row">
          <!-- 第一列：其他内容 -->
          <div class="col-md-4">
            <p>左侧说明内容区域</p>
          </div>
          <!-- 第二列：表格区域 -->
          <div class="col-md-8">
            <div class="table-responsive">
              <table class="table table-bordered modal-inner-table w-100">
                <thead>
                  <tr>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>2024年会员订阅服务年费套餐</td>
                    <td>¥399</td>
                    <td>1</td>
                    <td>¥399</td>
                  </tr>
                  <!-- 可自行添加更多行测试滚动效果 -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确认支付</button>
      </div>
    </div>
  </div>
</div>

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