Bootstrap 4 左右布局（左表格右图片）非响应式问题求助

嘿，我来帮你搞定这两个布局问题！咱们分两部分来解决，先处理表格的垂直滚动，再搞定图片导致的横向滚动问题：

1. 实现表格的垂直滚动（保持非响应式） #

你需要把表格放在一个固定高度的容器里，并且开启垂直滚动，同时不要用Bootstrap的table-responsive类（这个类会让表格横向滚动，不符合你的需求）。具体做法：

• 用一个<div>包裹表格，给这个容器设置固定高度（比如500px）和overflow-y: auto，这样表格内容超出容器高度时就会自动出现垂直滚动条。
• 表格本身只需要用table系列基础类（比如table table-bordered），保持原有列宽不换行。

2. 解决图片导致的页面横向滚动 #

要让超宽图片适配屏幕，只需要给图片加上Bootstrap自带的img-fluid类，这个类会自动给图片设置max-width: 100%; height: auto;，让图片自适应所在列的宽度，不会超出屏幕范围。同时确保图片所在的列是Bootstrap的栅格列（比如col-md-6），这样列会根据屏幕宽度自动调整。

完整示例代码 #

<div class="container-fluid">
  <div class="row">
    <!-- 左侧表格列 -->
    <div class="col-md-6">
      <!-- 表格容器：固定高度+垂直滚动 -->
      <div style="height: 500px; overflow-y: auto;">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>表头列1</th>
              <th>表头列2</th>
              <th>表头列3</th>
              <th>表头列4</th>
              <th>表头列5</th>
            </tr>
          </thead>
          <tbody>
            <!-- 重复多行数据测试滚动 -->
            <tr><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td></tr>
            <tr><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td></tr>
            <tr><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td></tr>
            <tr><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td></tr>
            <!-- 可以继续添加更多行 -->
          </tbody>
        </table>
      </div>
    </div>

    <!-- 右侧图片列 -->
    <div class="col-md-6">
      <!-- img-fluid确保图片自适应容器 -->
      <img src="你的图片地址" class="img-fluid" alt="图片描述">
    </div>
  </div>
</div>

额外提示 #

• 如果表格在小屏幕上列内容太拥挤，可以给表格加上table-sm类，缩小单元格内边距，优化显示效果。
• 如果你需要更灵活的容器高度，可以用百分比（比如height: 80vh）代替固定像素值，让容器高度适配视口。

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