Question

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

小提琴示例：：

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规范说在这种模式下行边界被忽略：

行，列，行组和列组不能有边框（即，用户代理必须忽略这些元素的边框属性）。

Link

html，更改边框折叠时，css边框消失

1 个答案: