Giving a border to an HTML table row, <tr>
border, css, html, html-table
Solution
You can set `border` properties on a `tr` element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of `border-collapse` is `separate` according to CSS 2.1, and some browsers also set it as default value for `table`. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi `collapse`.)
Thus, you need to use collapsing borders. Example:
<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
Problem
Is it possible to border a table row, `<tr>` in one go instead of giving a border to individual cells, `<td>` like, ``` <table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none"> <tbody> <tr> <th style="width: 96px;">Column 1</th> <th style="width: 96px;">Column 2</th> <th style="width: 96px;">Column 3</th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td> <td style="border-top: thin solid; border-bottom: thin solid;"> </td> <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table> ``` This gives a border around the given `<tr>` but it requires a border around individual cells. Can we give a border to `<tr>` only in one go? → jsFiddle