使用overflow:auto的容器为何会截断表格右侧边框？

这个问题我之前也碰到过，核心是滚动容器和表格的宽度计算逻辑冲突，再加上border-collapse: collapse的特性共同导致的。先给你拆解原因，再给出可行的解决方案：

为什么会出现边框截断？ #

当你设置table { width: 100% }同时容器开启overflow-x: auto时，浏览器计算表格总宽度时，会把合并后的边框宽度也算入其中。此时如果容器的可用宽度刚好等于表格的内容宽度，表格的总宽度（内容+边框）会略大于容器宽度，触发容器的微小横向滚动——即使滚动条肉眼不可见，容器的内部可视区域也会比表格窄1px，最终导致右侧边框被截断。另外你给.scroll-holder加的white-space: nowrap是多余的，table元素不会继承这个属性，反而可能干扰布局，建议移除。

解决方案 #

方案1：给滚动容器预留边框宽度（最简单有效） #

给.scroll-holder添加padding-right: 1px（数值对应你的边框宽度），这样表格的右侧边框就不会被容器边缘“挤”出去：

.scroll-holder { 
  display: block; 
  overflow-x: auto; 
  padding-right: 1px; /* 预留边框宽度，解决截断问题 */
  /* 移除无用的white-space: nowrap */
}

方案2：让容器自适应表格宽度（适合表格列数少的场景） #

给滚动容器设置min-width: fit-content，这样当视口足够容纳表格时，容器会自适应表格的实际宽度，同时当表格列数超过5列时，依然会触发横向滚动：

.scroll-holder { 
  display: block; 
  overflow-x: auto; 
  width: 100%; /* 保持容器在表格较宽时占满父容器 */
  min-width: fit-content; /* 表格较窄时自适应宽度 */
}

方案3：调整表格的盒模型（需注意兼容性） #

给表格添加box-sizing: border-box，让width: 100%包含边框宽度，避免表格总宽度超出容器。不过要注意，border-collapse: collapse下box-sizing的效果可能和预期有差异，因为边框是合并共享的，所以这个方案更适合配合border-collapse: separate使用：

table { 
  border-collapse: collapse; 
  width: 100%; 
  table-layout: fixed; 
  border-spacing: 0px; 
  box-sizing: border-box; /* 让width包含边框 */
}

完整修正代码示例 #

以方案1为例，最终的CSS和HTML如下：

table { 
  border-collapse: collapse; 
  width: 100%; 
  table-layout: fixed; 
  border-spacing: 0px; 
}
tr { height: 78px; }
thead { color: #92a1a6; }
thead th { width: 264px; }
thead td { width: 128px; }
tbody { border: 1px solid black; }
tbody th { width: 264px; }
tbody td { width: 128px; }
tbody tr, tbody th, tbody td { border: 1px solid black; }
.scroll-holder { 
  display: block; 
  overflow-x: auto; 
  padding-right: 1px;
}

<div class="scroll-holder"> 
  <table> 
    <thead> 
      <tr> 
        <th>First</th> 
        <td>1.25</td> 
        <td>2</td> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <th>Title here</th> 
        <td>1250</td> 
        <td>1250</td> 
      </tr> 
    </tbody> 
  </table> 
</div>

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