568

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.

3
  • 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: w3.org/TR/html-markup/tr.html
    – Tass
    Commented Dec 5, 2013 at 21:15
  • 1
    If you want to have a border bottom for table's tr you can follow this jsfiddle.net/7awN4
    – AllenC
    Commented Jan 28, 2014 at 7:11
  • 13
    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
    Commented Apr 7, 2016 at 15:43

18 Answers 18

788

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

7
  • 4
    This does not work by itself. You still can't style the row, but you can style the cells.
    – Geeky Guy
    Commented Mar 20, 2014 at 19:54
  • 60
    You are wrong, @Renan . The collapsing border model is exactly what makes row borders stylable. According to CSS sectoin 17.6: 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). Commented Oct 3, 2014 at 13:52
  • 21
    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
    Commented Oct 22, 2016 at 15:43
  • Seems that Chrome does not have this feature, though it support others of border-collapse features.
    – Liqun Sun
    Commented Mar 10, 2020 at 14:54
  • 2
    This removed the padding. Commented Jul 4, 2020 at 11:07
478

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;
}
6
  • 43
    Note that using this solution you will most likely have a gap in the border between td's. simoncereska's answer 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
    Commented Apr 11, 2014 at 12:06
  • 29
    You could also remedy this by adding cellspacing="0" as an attribute to <table> (see this question). Don't know how this will look with dotted or dashed borders, though. Commented May 5, 2014 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? Commented Oct 3, 2014 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. Commented Jan 16, 2018 at 21:27
  • and your table need this style <table style="border-collapse:collapse">
    – Oguz
    Commented Jul 24, 2019 at 10:08
83

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

3
  • 7
    setting border on the tr is useless even with border collapsed. you have to set it on the tds of the tr Commented Aug 3, 2015 at 13:54
  • 16
    @RaduSimionescu Wrong, it works perfectly fine on the tr with border collapsed.
    – Styphon
    Commented Nov 10, 2015 at 15:33
  • No effect in FF 45.0.1.
    – imrek
    Commented Apr 20, 2016 at 18:33
57

Use

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

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

1
  • Thats the way I would do it too! Add the border on the td and use border-collapse on the table
    – Sayan
    Commented Nov 16, 2016 at 6:35
42

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

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

1
  • 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
    Commented Aug 24, 2020 at 22:17
8

Use

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

Replace "thin solid" with CSS properties.

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;
}
2
  • 12
    Not a good idea to set display: block for tr's. Use tr td { border-bottom: ... } ad tr.oddrow td { border-bottom: ... } instead
    – vladr
    Commented Nov 23, 2012 at 20:09
  • 4
    display block might destroy the table layout.border-collapse:collapse on the table itself is definitly the best solution
    – N4ppeL
    Commented Mar 19, 2014 at 13:18
5

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 :

enter image description here

Hope it helps :)

1
  • 1
    This is the best answer, all other solutions require border-collapse: collapse; which imho is a big limitation. Commented Nov 18, 2022 at 18:35
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>

3

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

<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

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>
1
  • Adding a whole table row and table cell to insert an <hr>? This is an "absolute last resort" type of an answer.
    – hungerstar
    Commented Aug 11, 2020 at 12:42
1

No CSS border bottom:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>
1
  • using <hr> is surely cheating ;) Commented Sep 8, 2020 at 15:18
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'>
2
  • you can't put a border on a tr. Edited answer to clarify this.
    – Decko
    Commented Mar 20, 2018 at 18:03
  • That's the simplest and most accurate answer.
    – JamesC
    Commented Dec 30, 2018 at 21:20
0

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>

-4

HTML

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

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}
1
  • 3
    useless without border-collapse:collapse;
    – m1crdy
    Commented Jul 15, 2016 at 15:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.