仅针对Table Head(TH)设置border-collapse和spacing为何无效？

首先来看你提供的代码：

HTML代码 #

<table style="width:100%"> 
  <tr> 
    <th>First name</th> 
    <th>Last name</th> 
    <th>Age</th> 
  </tr> 
  <tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
  </tr> 
  <tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
  </tr> 
</table>

CSS代码 #

table, th, td { 
  margin-top:150px; 
  margin-bottom:150px; 
  border:1px solid black; 
}
th, td { padding:15px; }
th { text-align:left; border-collapse:collapse; }

你遇到的核心问题是：border-collapse是仅能作用于<table>元素的CSS属性，单元格（<th>/<td>）并不支持这个属性。

这个属性的作用是控制整个表格的边框渲染规则——指定表格的边框是合并成单一边框（collapse值），还是保持单元格各自独立的边框（默认的separate值）。它的生效范围是整个表格，必须绑定在<table>元素上才能起作用，你把它写在<th>的样式里，浏览器会直接忽略这个无效的属性声明，自然看不到边框合并的效果。

而你提到的背景色、内边距（padding）这些样式，是<th>元素本身支持的CSS属性，所以设置后能正常生效，和border-collapse的属性适用范围完全不同。

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