html, css 更改 border-collapse 时边框消失

Question

我创建了一个 example 来说明我的问题以及这个 fiddle

Fiddle 示例：：

table,
tr {
  border: 3px solid red;
}

#table1 {
  border-collapse: collapse;
  border-color: blue;
}

#table2 {
  border-collapse: separate;
  border-color: blue;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <h2>border-collapse: collapse:</h2>
  <table id="table1">
    <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>

  <h2>border-collapse: separate:</h2>
  <table id="table2">
    <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>

</body>

</html>

我想知道为什么当 border-collapse 设置为分隔时我的行边框消失了。

如果您在样式部分将 tr 更改为 td，您会看到当我在每个单元格周围添加边框时，它并没有消失。

Answer 1

CSS 规范说在这种模式下行边界被忽略：

Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

Link

html, css 更改 border-collapse 时边框消失

html, css border dissappear when changing border-collapse

html

css

border