如何仅通过CSS解决首行表头模式下多余右侧边框问题？

要实现需求，关键是通过CSS选择器精准识别仅首行包含<th>的表格（即纯首行表头模式），并移除其中所有<th>的右侧边框；其余模式（首列表头、首行+首列表头、无表头）的表头单元格保留右侧边框。

修改后的CSS代码 #

table {
  border: 1px solid #D2D2D2;
  border-collapse: collapse;
  
  th {
    padding: 16px;
    border-right: 1px solid #D2D2D2;
    background: #F1F1F1;
  }
  
  td {
    padding: 16px;
  }
  
  tr {
    border-bottom: 1px solid #D2D2D2;
  }
  
  /* 仅针对纯首行表头的表格，移除所有表头单元格的右侧边框 */
  table:has(tr:first-child th):not(:has(tr:not(:first-child) th)) th {
    border-right: 0;
  }
}

选择器说明 #

• table:has(tr:first-child th)：筛选出**首行包含<th>**的表格（排除无表头的表格）。
• :not(:has(tr:not(:first-child) th))：进一步排除**非首行也包含<th>**的表格（即排除首列表头、首行+首列表头的表格）。
• 最终仅匹配纯首行表头的表格，对其中所有<th>设置border-right: 0。

效果验证 #

1. 纯首行表头：表格仅首行有<th>，所有表头单元格右侧边框被移除，符合需求。
2. 首列表头：每一行首列是<th>，非首行也存在<th>，表头单元格保留右侧边框。
3. 首行+首列表头：首行和非首行都有<th>，表头单元格保留右侧边框。
4. 无表头：无<th>元素，无额外样式影响。

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