如何隐藏含rowspan的单元格与最后一行共享的表格边框？

阿华AIGC实验室

2026-5-15

解决表格rowspan单元格与最后一行共享边框的隐藏问题

当然可以搞定这个需求！你之前尝试把最后一行左侧边框设为透明没生效，核心原因是表格单元格的边框是各自独立渲染的，透明边框并不会覆盖 rowspan 单元格已有的边框，我们需要针对 rowspan 单元格的边框做精准控制。

思路拆解

你的第一列单元格用了 rowspan 跨多行，它的底部边框会贯穿整个跨行高度，而最后一行的左侧边框会和这个底部边框交叉重叠。要隐藏这个共享边框，我们可以让 rowspan 单元格的底部边框只在非最后一行的位置显示，或者用背景色把重叠的边框区域盖住。

针对你现有代码的修改方案

方案一：精准控制rowspan单元格的底部边框

这是最直接的方法，我们通过CSS伪类来给除了最后一行对应的跨行单元格之外的元素添加底部边框：

/* 调整左侧rowspan单元格的基础样式 */
#detailYear .yearCellVertical {
  height: 140px;
  white-space: nowrap;
  width: 5%;
  border-color: #000;
  border-right: 1px solid;
  /* 先默认不设置底部边框 */
  border-bottom: none;
}
/* 给除最后一个跨行单元格外的元素添加底部边框 */
#detailYear .yearCellVertical:not(:last-child) {
  border-bottom: 1px solid #000;
}
/* 优化最后一行的样式，去掉无效的透明边框 */
#detailYear .blackBorderPrintLeft {
  padding: 15px;
  font-size: 20px;
  vertical-align: middle;
  border-color: #000 !important;
  border-top: 1px solid !important;
  border-bottom: 1px solid !important;
  border-left: 1px solid #000 !important;
}

如果你的第一列只有一个单元格跨了所有行，那直接给这个单元格设置 border-bottom: none 就可以了，更简单。

方案二：用背景色覆盖重叠边框

如果方案一因为DOM结构限制不好实现，还可以给最后一行的第一个单元格加一个小的背景块，把重叠的边框盖住：

/* 给最后一行单元格设置相对定位 */
#detailYear .blackBorderPrintLeft {
  padding: 15px;
  font-size: 20px;
  vertical-align: middle;
  border-color: #000 !important;
  border-top: 1px solid !important;
  border-bottom: 1px solid !important;
  border-left: 1px solid #000 !important;
  position: relative;
}
/* 添加白色背景块覆盖共享边框区域（颜色和表格背景一致） */
#detailYear .blackBorderPrintLeft::before {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}

补充表格整体边框的一致性

因为你替换了Bootstrap的table-bordered类，建议补充以下样式确保边框统一：

#detailYear {
  display: none;
  width: 94%;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-spacing: 0;
}
#detailYear td {
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd;
}
/* 保持第一列单元格的左右边框为黑色 */
#detailYear .yearCellVertical {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}