Grid布局中溢出行的border-bottom不显示问题

问题分析 #

用Grid实现表格并设置overflow-x: auto后，溢出区域的单元格border-bottom无法渲染，核心原因是Grid容器的宽度被父容器限制为可视区域宽度，导致溢出部分的单元格边框未被完整绘制。

解决方案 #

给Grid容器添加min-width: fit-content样式，让Grid容器宽度自适应所有列的总宽度，确保单元格边框能完整渲染：

.table-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(150px, 1fr));
  gap: 0;
  min-width: fit-content; /* 新增样式 */
}

替代方案（若上述方法不生效） #

如果浏览器对fit-content支持存在问题，可改用box-shadow替代border-bottom，阴影不会因容器溢出被裁剪：

.grid-item {
  /* 替换原border-bottom */
  box-shadow: inset 0 -1px 0 #ccc;
  padding: 8px;
}

也可以将每行包装为独立的Grid容器，给每行容器设置border-bottom，确保每行边框随滚动完整显示：

<div class="table-container">
  <div class="table-row">
    <div class="grid-item">表头1</div>
    <div class="grid-item">表头2</div>
    <!-- 更多表头单元格 -->
  </div>
  <div class="table-row">
    <div class="grid-item">内容1</div>
    <div class="grid-item">内容2</div>
    <!-- 更多内容单元格 -->
  </div>
</div>

.table-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(150px, 1fr));
  gap: 0;
  border-bottom: 1px solid #ccc; /* 给每行添加边框 */
}
.grid-item {
  padding: 8px;
}

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