HTML设置border-collapse:collapse后无法修改边框颜色求助

问题分析与修复方案 #

你的代码里有两个主要问题，导致设置border-collapse:collapse的表格没法正确修改边框颜色：

1. 第二个表格没加border-collapse:collapse属性：全局CSS里所有表格默认用border-collapse:separate，第二个表格得显式把这个属性改成collapse才行。
2. 全局样式的th/td边框优先级更高：全局CSS设置了table,th,td{border:1px solid red}，哪怕你给表格设了蓝色边框，th和td的红色边框在折叠模式下会盖过表格边框——因为单元格的边框是直接应用在每个单元格上的，折叠时会优先显示这些边框。

修正后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Living vs Non living</title>
  <style type="text/css">
    body{background-color:RGB(255,251,214)}
    table,th,td{border:1px solid red}
    table{border-collapse:separate;border-spacing:20px}
    /* 给折叠表格的单元格统一设蓝色边框 */
    .collapse-table th, .collapse-table td {
        border-color: blue;
    }
  </style>
</head>
<body>
<!-- 第一个表格：separate模式 -->
<table>
    <caption><h3>Livings things and non-living things</h3></caption>
    <tr>
        <th style="background-color:red;color:white">Living things</th>
        <th style="background-color:red;color:white">Non Living things</th>
    </tr>
    <tr>
        <td>Consists of cell</td>
        <td>No cell</td>
    </tr>
    <tr>
        <td>Needs food for energy</td>
        <td>Needs no food</td>
    </tr>
    <tr>
        <td>Shows growth and movement</td>
        <td>No growth and movement</td>
    </tr>
</table>

<!-- 第二个表格：collapse模式 -->
<table class="collapse-table" style="border-collapse:collapse;border-color:blue;color:white">
    <caption><h3>Livings things and non-living things</h3></caption>
    <tr>
        <th style="background-color:cyan">Living things</th>
        <th style="background-color:cyan">Non Living things</th>
    </tr>
    <tr>
        <td>Consists of cell</td>
        <td>No cell</td>
    </tr>
    <tr>
        <td>Needs food for energy</td>
        <td>Needs no food</td>
    </tr>
    <tr>
        <td>Shows growth and movement</td>
        <td>No growth and movement</td>
    </tr>
</table>
</body>
</html>

关键修改点 #

• 给第二个表格加上border-collapse:collapse，明确开启边框折叠模式。
• 新增.collapse-table相关的CSS规则，专门覆盖折叠表格内单元格的边框颜色为蓝色，解决全局红色边框的干扰。
• 保留表格的border-color:blue，确保整体边框样式统一。

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