CODEWITHSUNDEEP
htmlcssborder
Kat
Kat

Reputation: 666

html, css border dissappear when changing border-collapse

I have created an example to illustrate my issue as well as this fiddle

Fiddle 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>

I'm wondering why my row border disappears when the border-collapse is set to separate.

If you change tr to td in the style section, you can see that when I have a border around every cell, it does not disappear.

Upvotes: 1

Views: 2035

Answers (1)

Mailosz
Mailosz

Reputation: 171

CSS specification says that row borders are ignored in this mode:

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

Link

Upvotes: 2

Related Questions