rc-table组件实现表格及单元格单黑线边框的样式问题咨询

你遇到的边框问题可以通过调整表格的边框合并属性解决，无需使用outline实现边框效果，现有组件代码无需修改，仅调整CSS即可。

问题原因 #

• 使用border出现多余间距：HTML表格默认border-collapse属性为separate，单元格之间存在默认的border-spacing间距，导致边框分离
• 使用outline出现边框重叠：outline不参与盒模型布局，不会占用元素空间，相邻元素的outline会直接叠加，导致边框变为2px粗细

修改后的CSS代码 #

.tbl {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* 核心属性：合并所有相邻边框为单条 */
  border-collapse: collapse;
  /* 表格整体外边框 */
  border: 1px solid $black;
}

.tblColumn {
  padding: 0 0 0 10px;
  margin: 0;
  box-sizing: border-box;
  /* 单元格边框，会自动和相邻边框合并为1px */
  border: 1px solid $black;
}

冲突兼容 #

如果修改后仍有残留间距，可额外添加以下样式覆盖rc-table的默认内置样式：

.tbl th, .tbl td {
  border-spacing: 0;
}

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