Menu
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
393
To add a border to your table, you need to define the <style> of your table. Remember to add borders also for <th> and <td> tags to have a complete table. Set the border-collapse property as well (if you don't define the border-collapse, it will use border-collapse: separate by default).
Not directly: adding a border to a tr isn't allowed. But you can target the first and last cell, give those a left/right border respectively. Then on each cell put a top border and a bottom border on each td element.
To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
