Giving a border to an HTML table row, <tr>
Solution 1
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>
Solution 2
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.
Solution 3
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
Solution 4
You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
Solution 5
Make use of CSS classes:
tr.border{
outline: thin solid;
}
and use it like:
<tr class="border">...</tr>
Related videos on Youtube
Tiny
Just an orphan kid and have no more to say. Three things in general, cannot be avoided (at least I can never) Mother Mother-tongue Mother-land. They are always unique. I'm a family-less boy. My family was hunted leaving me all alone when my house targeted and deliberately set on a fire by a mob during a nonsense communal riot but I was survived by a rescue team with the help of firemen. As a survival, I didn't know whether it was my fortune or misfortune but when I recovered, the rescue team came to my home, one day. One of the members gave me a piece of paper in my hand in which the following text was written. lifeisnowhere. He asked me to read it carefully and I could hardly interpret the text as Life is now here, instead of Life is nowhere. All of them gave me a cute smile and went away and I decided to live peacefully and hopefully on their saying from then onwards and very soon. Because of this tragedy, I'm alone couldn't join a school but a curiosity to learn something made me a self-learner. I'm indeed a self-learner, so I'm likely not able to answer any questions on this site right now. In the field of computer science, my self-study mainly includes, QBASIC, C, C++, C#, VB, Java, JavaScript, PHP and a little about ASP.NET. Oracle, MySQL and MSSQL-Server with DBMS. and other theoretical subjects. I'm currently dealing with - Android and Java EE including Servlet, JSP-JSTL/EL (with Spring and Struts with ORM models JPA/Hibernate) and JSF.
Updated on April 28, 2022Comments
-
Tiny about 2 years
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? -
Itay Gal over 10 years<tr> should be a container not an element so formatting his child through his style is not correct in terms of semantics, even if it works.
-
Tiny over 10 yearsGoogle Chrome and Internet Explorer show a border around a
<tr>
but Mozilla Fire Fox doesn't display a border. -
takendarkk over 10 yearsTry using
outline
instead ofborder
. That should fix compatibility. I only have Chrome atm, so I can't test it. -
Jukka K. Korpela over 10 yearsOutline is not border.
-
takendarkk over 10 years@JukkaK.Korpela What are the main differences? If you use outline and no border, are there any visual differences? Also, if this is incorrect can you provide a correct solution?
-
Tiny over 10 yearsIt looks like Internet Explorer dislikes
last-child
(It does not seem to support). -
Itay Gal over 10 years@Tiny which IE version do you wish to support? Version 9+ supports first-child and last-child.
-
Robert Siemer over 9 yearsYou are not styling <tr>, you’re styling <td>.
-
Abhishek over 9 yearsChrome 37 does not put a border on
tr
jsbin.com/mopuci/1/edit?html,css,output -
tsh about 7 years@takendarkk outline do not work with
border-radius
-
me_ over 6 years@Robert Siemer While it is true that this puts a border around rows, it also requires "border-collapse: collapse". Columns cannot be spaced using the cellpadding property in this manner. The outline property used in csmckelvey's answer below provides for greater control over the look of the table and achieves exactly the same goal. This should not be the accepted answer as it unnecessarily limits functionality to achieve the goal.
-
me_ over 6 years@tsh border-collapse: collapse doesn't work with cellpadding
-
franiis almost 5 yearsCould you add comment to your answer and explain what did you changed?
-
Jacob Stamm over 3 yearsThis offers much more control over styling than
outline
does. Should be a higher answer. -
matt forsythe over 2 yearsA good suggestion, but in my case, I want to be able to set border-top and border-bottom.
outline
does not seem to provide this functionality. -
Ricardo F. about 2 yearsVery good workaround