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 {_x000D_
border: 1px solid black;_x000D_
}
_x000D_
<table>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>_x000D_
Text_x000D_
</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
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.
This question is related to
html
css
html-table
Add this to the stylesheet:
table {
border-collapse: collapse;
}
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.
Source: Stackoverflow.com