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?
→ jsFiddle
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>
Absolutely! Just use
<tr style="outline: thin solid">
on which ever row you like. Here's a fiddle.
Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.
Yes. I updated my answer DEMO
table td {
border-top: thin solid;
border-bottom: thin solid;
}
table td:first-child {
border-left: thin solid;
}
table td:last-child {
border-right: thin solid;
}
If you want to style only one <tr>
you can do it with a class: Second DEMO
Make use of CSS classes:
tr.border{
outline: thin solid;
}
and use it like:
<tr class="border">...</tr>