Giving a border to an html table row, <tr>
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?
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 .)
You therefore have to use the collapsed borders Example:
<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>