180

It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.

How can I set a border on a tr ?

My attempt, which doesn't work:

table tr {
  border: 1px solid black;
}
<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

This is a similar question: Set border to table tr, works in everything except IE 6 & 7 , but it seems to work everywhere except for IE.

edi9999
  • 19,701
  • 13
  • 88
  • 127

2 Answers2

394

Add this to the stylesheet:

table {
  border-collapse: collapse;
}

JSFiddle.

The reason why it behaves this way is actually described pretty well in the specification:

There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other.

... and later, for collapse setting:

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • 3
    Why exactly was the border hidden ? – edi9999 Sep 07 '13 at 23:59
  • 6
    Because that's how `separate` - default - table border model works: you specify borders for each cell. I'll update the answer with quotes from the documentation. – raina77ow Sep 08 '13 at 00:05
  • 1
    @edi9999 - I recommend using a reset stylesheet. Check this out [http://www.cssreset.com/](http://www.cssreset.com/) – Black Sheep Sep 08 '13 at 00:06
  • 2
    The specific explanation to why the border was hidden is this statement in the cited CSS spec, presented as applying in the separated borders model: “Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).” – Jukka K. Korpela Aug 22 '14 at 14:14
  • Playing with your fiddler example helped, thanks ;) – Zeek2 Feb 25 '20 at 14:05
4

It is possible to emulate border in table border collapse separate mode with css box-shadow :

table tr {
  box-shadow: 0 0 4px #ccc;
}
Flo Develop
  • 655
  • 1
  • 6
  • 9