Add border-bottom to table row <tr>
HtmlCssHtml TableHtml Problem Overview
I have a table of 3 by 3. I need a way to add a border for the bottom of every row tr
and give it a specific color.
First I tried the direct way, i.e.:
<tr style="border-bottom:1pt solid black;">
But that didn't work. So I added CSS like this:
tr {
border-bottom: 1pt solid black;
}
That still didn't work.
I would prefer to use CSS because then I don't need to add a style
attribute to every row.
I haven't added a border
attribute to the <table>
. I hope that that is not affecting my CSS.
Html Solutions
Solution 1 - Html
Add border-collapse:collapse
to your table rule:
table {
border-collapse: collapse;
}
Example
table {
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid black;
}
<table>
<tr><td>A1</td><td>B1</td><td>C1</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>
Solution 2 - Html
I had a problem like this before. I don't think tr
can take a border styling directly. My workaround was to style the td
s in the row:
<tr class="border_bottom">
CSS:
tr.border_bottom td {
border-bottom: 1px solid black;
}
Solution 3 - Html
Use border-collapse:collapse
on table and border-bottom: 1pt solid black;
on the tr
Solution 4 - Html
Use
border-collapse:collapse
as Nathan wrote and you need to set
td { border-bottom: 1px solid #000; }
Solution 5 - Html
There are lot of incomplete answers here. Since you cannot apply a border to tr
tag, you need to apply it to the td
or th
tags like so:
td {
border-bottom: 1pt solid black;
}
Doing this will leave a small space between each td
, which is likely not desirable if you want the border to appear as though it is the tr
tag. In order to "fill in the gaps" so to speak, you need to utilize the border-collapse
property on the table
element and set its value to collapse
, like so:
table {
border-collapse: collapse;
}
Solution 6 - Html
You can use the box-shadow
property to fake a border of a tr
element. Adjust Y position of box-shadow
(below represented as 2px) to adjust thickness.
tr {
-webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}
Solution 7 - Html
I tried adding
table {
border-collapse: collapse;
}
alongside the
tr {
bottom-border: 2pt solid #color;
}
and then commented out border-collapse to see what worked. Just having the tr selector with bottom-border property worked for me!
No Border CSS ex.
No Border Photo live
CSS Border ex.
Table with Border photo live
Solution 8 - Html
Use
table{border-collapse:collapse}
tr{border-top:thin solid}
Replace "thin solid" with CSS properties.
Solution 9 - Html
Display the row as a block.
tr {
display: block;
border-bottom: 1px solid #000;
}
and to display alternate colors simply:
tr.oddrow {
display: block;
border-bottom: 1px solid #F00;
}
Solution 10 - Html
Another solution to this is border-spacing
property:
table td {
border-bottom: 2px solid black;
}
table {
border-spacing: 0px;
}
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</table>
Solution 11 - Html
I found when using this method that the space between the td elements caused a gap to form in the border, but have no fear...
One way around this:
<tr>
<td>
Example of normal table data
</td>
<td class="end" colspan="/* total number of columns in entire table*/">
/* insert nothing in here */
</td>
</tr>
With the CSS:
td.end{
border:2px solid black;
}
Solution 12 - Html
<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">
You can do the same to the whole row as well.
There is border-bottom-style
, border-top-style
,border-left-style
,border-right-style
. Or simply border-style
that apply to all four borders at once.
You can see (and TRY YOURSELF online) more details here
Solution 13 - Html
Several interesting answers. Since you just want a border bottom (or top) here are two more. Assuming you want a blue border 3px thick. In the style section you could add
.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}
In the table code either
<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>
Solution 14 - Html
No CSS border bottom:
<table>
<thead>
<tr>
<th>Title</th>
</tr>
<tr>
<th>
<hr>
</th>
</tr>
</thead>
</table>
Solution 15 - Html
You can't put a border on a tr element. This worked for me in firefox and IE 11:
<td style='border-bottom:1pt solid black'>
Solution 16 - Html
If you don't want to
- enforce border collapse on the table
- use the TD elements styling
You can use the ::after selector to add borders to TR :
table tbody tr {
position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
position : relative; # needed to apply a z-index
z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
content : '';
position : absolute;
z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
top : 0px;
left : 0px;
width : 100%;
height : 100%;
border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}
It is a simple trick that I used in a scenario where I had to put spaces between table-rows so I wasn't able to add a border collapse on the table, the end result :
Hope it helps :)
Solution 17 - Html
HTML
<tr class="bottom-border">
</tr>
CSS
tr.bottom-border {
border-bottom: 1px solid #222;
}