纯CSS实现单一行表格与多行表格的差异化单元格边框样式

当然可以做到！完全不需要修改HTML结构，也不用依赖JavaScript，只靠CSS就能精准满足你的需求。

方法一：用:only-child伪类（兼容性拉满） #

这个方法的核心是判断表格里的<tr>是否是唯一子元素，当表格只有一行时，<tr>会匹配:only-child规则，我们就能针对性修改单元格边框：

/* 默认给所有表格的单元格添加边框 */
td {
  border: 1px solid black;
}

/* 仅当表格只有一行时，隐藏该行的单元格边框 */
table tr:only-child td {
  border: none;
  /* 也可以用 border-width: 0; 效果一致 */
}

原理很直白：tr:only-child会选中**<table>元素里唯一的<tr>**，再通过后代选择器选中该行的所有<td>，把边框样式清空即可。

方法二：用:has()伪类（语义更直观，注意兼容性） #

如果你偏好更易懂的写法，可以用CSS的:has()选择器，直接判断表格是否只包含一个<tr>：

td {
  border: 1px solid black;
}

/* 当表格仅包含一个<tr>时，隐藏单元格边框 */
table:has(tr:only-child) td {
  border: none;
}

这个写法可读性更强，但要注意：:has()不支持IE系列浏览器，不过Chrome、Firefox、Safari等现代主流浏览器都已经全面支持了。

效果验证 #

• 多行列的表格：所有单元格会正常显示黑色边框；
• 仅一行的表格：单元格边框会被完全隐藏，完全符合你的需求。

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