Add border-bottom to table row

Question

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.

As a side note, if inline styling (first example in your question) isn't working then it's unlikely that embedded styling (second example) will work. You should also research the availability of attributes for the element you're attempting to style: http://www.w3.org/TR/html-markup/tr.html — Tass, Dec 05 '13 at 21:15
If you want to have a border bottom for table's tr you can follow this http://jsfiddle.net/7awN4/ — AllenC, Jan 28 '14 at 07:11
Just a note to encourage future searchers to scroll down to @Nathan Manousos's answer, below - it's probably the solution you're looking for — henry, Apr 07 '16 at 15:43

score 752 · Answer 1 · edited Nov 27 '20 at 18:12

752

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>

Link

edited Nov 27 '20 at 18:12

Cristian Ciupitu

20,270
7
50
76

answered Apr 06 '12 at 08:14

Nathan Manousos

13,328
2
27
37

3

This does not work by itself. You still can't style the row, but you can style the cells. – Geeky Guy Mar 20 '14 at 19:54
58

You are wrong, @Renan . The collapsing border model is exactly what makes row borders stylable. According to [CSS sectoin 17.6](http://www.w3.org/TR/CSS21/tables.html#borders): In the separate border model “Rows, [...] cannot have borders (i.e., user agents must ignore the border properties for those elements).” “In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row [and] row group [...]” And by the way: it does work in my browser (Chromium 37). – Robert Siemer Oct 03 '14 at 13:52
19

I think some people might be getting confused (like I did) and aren't noticing that the border-collapse style needs to be set on the table, not the row. – Porlune Oct 22 '16 at 15:43
Seems that Chrome does not have this feature, though it support others of border-collapse features. – Liqun Sun Mar 10 '20 at 14:54
2

This removed the padding. – Michael Rogers Jul 04 '20 at 11:07
I have been trying to get a solid bottom row line to work and I either lose my padding and margin or I get no border. How do I get both ? – numerical25 Feb 14 '22 at 14:13

score 476 · Accepted Answer · edited Jul 21 '20 at 06:06

476

I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom: 1px solid black;
}

edited Jul 21 '20 at 06:06

Apostolos

10,033
5
24
39

answered Apr 06 '12 at 08:26

tsherif

11,502
4
29
27

42

Note that using this solution you will most likely have a gap in the border between td's. [simoncereska's answer](http://stackoverflow.com/a/10040974/2098939) takes care of this but be aware that it may not look nice with dotted or dashed border types (because they're not continuous) – Gerrit-K Apr 11 '14 at 12:06
29

You could also remedy this by adding `cellspacing="0"` as an attribute to `` (see [this question](http://stackoverflow.com/a/670571/2521769)). Don't know how this will look with dotted or dashed borders, though.
– Stefan van den Akker May 05 '14 at 12:28
5

`tr` can take border styling in the collapsing border model. @Sangram, consider accepting an answer which takes that into account instead of this one, no? – Robert Siemer Oct 03 '14 at 13:57
This will not work if there is padding between the table cells. If there is padding then the border will visibly be split int pieces. – Timothy Gonzalez Jan 16 '18 at 21:27
and your table need this style
– Oguz Jul 24 '19 at 10:08
This answer feels hacky. The answer by Nathan Manousos is far more elegant, fit for purpose, and should be the accepted answer. – OXiGEN Aug 24 '20 at 22:13

score 81 · Answer 3 · answered Jul 23 '14 at 09:50

81

Use border-collapse:collapse on table and border-bottom: 1pt solid black; on the tr

answered Jul 23 '14 at 09:50

Jpduro

918
6
4

7

setting border on the tr is useless even with border collapsed. you have to set it on the tds of the tr – Radu Simionescu Aug 03 '15 at 13:54
14

@RaduSimionescu Wrong, it works perfectly fine on the `tr` with border collapsed. – Styphon Nov 10 '15 at 15:33
No effect in FF 45.0.1. – imrek Apr 20 '16 at 18:33

score 56 · Answer 4 · edited Jun 11 '13 at 12:49

56

Use

border-collapse:collapse as Nathan wrote and you need to set

td { border-bottom: 1px solid #000; }

edited Jun 11 '13 at 12:49

Sangram Nandkhile

17,634
19
82
116

answered Apr 06 '12 at 08:26

simoncereska

3,035
17
24

Thats the way I would do it too! Add the border on the td and use border-collapse on the table – Sayan Nov 16 '16 at 06:35

score 41 · Answer 5 · answered Aug 31 '16 at 02:52

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;
}

score 17 · Answer 6 · edited Feb 19 '19 at 19:26

17

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);
}

edited Feb 19 '19 at 19:26

Mateusz Kocz

4,492
1
25
27

answered Feb 19 '19 at 17:47

Ian Bruce

171
1
3

score 11 · Answer 7 · edited Mar 18 '19 at 19:49

11

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 CSS ex.

No Border Photo live

No Border Photo live

CSS Border ex.

CSS Border ex.

Table with Border photo live

Table with Border photo live

edited Mar 18 '19 at 19:49

kenlukas

3,616
9
25
36

answered Mar 18 '19 at 18:52

MUFN

111
1
2

1

`bottom-border` is not a valid CSS property. I tried the same experiment toggling the `border-collapse` property in Chrome 84.0.4147.135 on Windows. The border will only show up when the property exists and is set to `collapse`. – OXiGEN Aug 24 '20 at 22:17

score 8 · Answer 8 · edited Dec 31 '15 at 11:40

8

Use

table{border-collapse:collapse}
tr{border-top:thin solid}

Replace "thin solid" with CSS properties.

edited Dec 31 '15 at 11:40

Sangram Nandkhile

17,634
19
82
116

answered Dec 28 '15 at 19:34

Jesse

81
1
1

score 6 · Answer 9 · answered Nov 23 '12 at 19:17

6

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;
}

answered Nov 23 '12 at 19:17

Jeremey

152
1
5

12

[**Not** a good idea](http://www.velocityreviews.com/forums/t160487-firefox-and-style-display-block-on-table-row.html) to set `display: block` for `tr`'s. Use `tr td { border-bottom: ... }` ad `tr.oddrow td { border-bottom: ... }` instead – vladr Nov 23 '12 at 20:09
4

display block might destroy the table layout.border-collapse:collapse on the table itself is definitly the best solution – N4ppeL Mar 19 '14 at 13:18

thiout_p · Answer 10 · 2021-06-15T13:54:02.083

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 :)

This is the best answer, all other solutions require border-collapse: collapse; which imho is a big limitation. — Dietrich Baumgarten, Nov 18 '22 at 18:35

score 4 · Answer 11 · answered Sep 04 '18 at 13:19

4

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>

answered Sep 04 '18 at 13:19

Eugen Konkov

22,193
17
108
158

score 3 · Answer 12 · answered Oct 14 '13 at 20:37

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;
}

score 2 · Answer 13 · answered Aug 17 '16 at 16:48

<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

score 2 · Answer 14 · answered Jun 19 '19 at 16:50

2

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>

answered Jun 19 '19 at 16:50

Howard Cary Morris

47
3

Adding a whole table row and table cell to insert an `
`? This is an _"absolute last resort"_ type of an answer. – hungerstar Aug 11 '20 at 12:42

score 1 · Answer 15 · answered Jan 19 '19 at 08:00

1

No CSS border bottom:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

answered Jan 19 '19 at 08:00

Gil Perez

853
10
13

using
is surely cheating ;) – Geoff Griswald Sep 08 '20 at 15:18

score 0 · Answer 16 · edited Mar 20 '18 at 18:03

0

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'>

edited Mar 20 '18 at 18:03

Decko

18,553
2
29
39

answered Aug 31 '17 at 18:37

rod

9
1

you can't put a border on a tr. Edited answer to clarify this. – Decko Mar 20 '18 at 18:03
That's the simplest and most accurate answer. – JamesC Dec 30 '18 at 21:20

score 0 · Answer 17 · answered Jul 22 '23 at 18:15

Having the border on the <td> instead of the <tr> is usually the way to go. However, if you're working with <td>'s of different heights and it messes up the layout, you could apply a linear gradient to the <tr> to achieve the same thing

table tr, table {
  border-spacing:0;
}
table td {
  padding:12px;
}

/* conventional method - applied to <td> */
table tr:first-child td {
  border-bottom:1px solid black;
}

/* alternative - applied to <tr>*/
table tr:last-child {
  background: linear-gradient(0deg, black 1px, transparent 1px);
}

<table>
  <tr>
    <td>td border bottom</td>
    <td>(conventional)</td>
  </tr>
  <tr>
    <td>tr gradient background</td>
    <td>(alternative)</td>
  </tr>
</table>

score -4 · Answer 18 · edited Mar 02 '16 at 14:20

-4

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}

edited Mar 02 '16 at 14:20

Starscream1984

3,072
1
19
27

answered Mar 01 '16 at 07:18

vikas

1

3

useless without border-collapse:collapse; – m1crdy Jul 15 '16 at 15:07

Add border-bottom to table row

18 Answers18

Example

Linked

Related