CSS表格边框异常问题：第二行与末行边框显示加粗的原因排查

你提到的这个边框视觉异常的问题，我之前也碰到过，结合你的代码和描述，主要是这几个原因导致的：

1. CSS语法与选择器错误 #

你的CSS代码存在两个明显问题：

• 选择器大小写错误：CSS选择器是区分大小写的，你写的Table（首字母大写）无法匹配HTML中的<table>标签，导致<table>本身的边框样式根本没生效，只有<td>元素有边框。
• 语法不完整：第二行的border: 1px solid black;后面缺少闭合的大括号}，这会让浏览器解析CSS时出现异常，部分样式的渲染逻辑混乱。

2. <th>元素未设置边框 #

你的代码里只给<td>加了边框，第一行的<th>元素没有边框样式。当开启border-collapse: collapse（边框合并）时，浏览器会尝试合并相邻单元格的边框，但<th>没有边框，会让下方<td>的顶部边框和<th>的默认样式（比如部分浏览器给<th>加的默认内边距或隐性边框）产生视觉叠加，看起来像是第二行边框加粗。

至于你说W3School教程里也有同样问题，大概率是示例代码存在类似的疏漏，或者是特定浏览器版本下的渲染特性导致的。

修正后的代码示例 #

CSS代码 #

table {
  border-collapse: collapse;
}
table, th, td {
  border: 1px solid black;
}

HTML代码 #

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

修正后所有单元格的边框样式统一，浏览器会正确合并边框，就不会出现某几行边框看起来加粗的情况了。

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