求助：如何用CSS实现表格内部特定样式的边框？

嘿，我来帮你搞定这个表格内部边框的问题！你之前遇到的“相邻单元格边框不显示”的问题，本质是因为表格默认的border-collapse: collapse会让相邻单元格的边框合并重叠，单独给外层单元格加border-top/border-left的话，相邻单元格没有对应的边框来“呼应”，重叠部分就会被覆盖掉。

给你两种靠谱的解决方案，都能实现你要的内部边框效果：

方法一：利用边框合并+伪类移除外层边框 #

先给所有单元格加上完整边框，再通过伪类把表格最外层的边框去掉，只保留内部的分隔线：

/* 让表格边框合并，避免间距 */
table {
  border-collapse: collapse;
}

/* 给所有单元格添加统一的边框 */
td, th {
  border: 1px solid rgb(72, 170, 230);
  padding: 8px; /* 加内边距让内容更美观 */
}

/* 移除最外层的边框 */
tr:first-child td, tr:first-child th {
  border-top: none; /* 去掉第一行的上边框 */
}
tr:last-child td, tr:last-child th {
  border-bottom: none; /* 去掉最后一行的下边框 */
}
td:first-child, th:first-child {
  border-left: none; /* 去掉每一行第一列的左边框 */
}
td:last-child, th:last-child {
  border-right: none; /* 去掉每一行最后一列的右边框 */
}

方法二：利用边框分离+局部边框 #

让表格边框不合并，只给单元格添加右侧和下侧边框，最后去掉最后一列的右边框和最后一行的下边框：

table {
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格之间的间距 */
  border: none; /* 去掉表格本身的外层边框 */
}

td, th {
  border-right: 1px solid rgb(72, 170, 230);
  border-bottom: 1px solid rgb(72, 170, 230);
  padding: 8px;
}

/* 移除多余的外层边框 */
td:last-child, th:last-child {
  border-right: none;
}
tr:last-child td, tr:last-child th {
  border-bottom: none;
}

这两种方法都能完美实现你要的内部边框效果，第一种兼容性更好，第二种逻辑更直观，你可以根据自己的需求选~

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