如何取消CSS border属性继承？特定表格边框异常求助

问题原因 #

你的核心问题是CSS选择器写法错误：原代码中的table.botborder table,th,td是三个独立选择器，分别对应「带botborder类的表格内部的子表格」「全局所有<th>」「全局所有<td>」——既没选中目标表格本身，也没精准定位它内部的单元格，导致全局边框样式根本没被覆盖。

修复方案 #

修正选择器，精准定位目标表格及其内部元素，重新设置边框规则：

/* 全局表格样式 */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

/* 1. 取消目标表格及内部单元格的所有边框 */
table.botborder, table.botborder th, table.botborder td {
  border: 0;
}

/* 2. 仅给目标表格的单元格添加底部边框 */
table.botborder th, table.botborder td {
  border-bottom: 1px solid #ddd;
}

完整修正后的代码 #

<!DOCTYPE html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table.botborder, table.botborder th, table.botborder td {
  border: 0;
}

table.botborder th, table.botborder td {
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="botborder">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>
</body>
</html>

补充说明 #

• border-collapse: collapse是继承属性，带botborder类的表格会自动继承全局设置，无需重复声明；
• 拆分两步设置样式（先取消所有边框，再单独加底部边框），逻辑更清晰，也避免了边框样式冲突。

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