162

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 try, 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.

connexo
  • 49,059
  • 13
  • 74
  • 108
edi9999
  • 18,115
  • 12
  • 85
  • 125

2 Answers2

349

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
  • 99,006
  • 14
  • 190
  • 222
  • 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
0

Besides what top answer says, you should also make sure your border has visible style, for example:

border-style: solid;

if you are adding custom styles to some website.

user4463876
  • 178
  • 1
  • 9