html – Add border-bottom to table row

The Question :

423 people think this question is useful

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.

The Question Comments :
  • 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
  • If you want to have a border bottom for table’s tr you can follow this jsfiddle.net/7awN4
  • 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

The Answer 1

426 people think this answer is useful

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

The Answer 2

553 people think this answer is useful

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

The Answer 3

76 people think this answer is useful

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

The Answer 4

44 people think this answer is useful

Use

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

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

The Answer 5

36 people think this answer is useful

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

The Answer 6

11 people think this answer is useful

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

The Answer 7

10 people think this answer is useful

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

The Answer 8

8 people think this answer is useful

Use

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

Replace “thin solid” with CSS properties.

The Answer 9

7 people think this answer is useful

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

The Answer 10

2 people think this answer is useful

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

The Answer 11

2 people think this answer is useful

<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

The Answer 12

2 people think this answer is useful

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>

The Answer 13

1 people think this answer is useful

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>

The Answer 14

1 people think this answer is useful

No CSS border bottom:

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

The Answer 15

0 people think this answer is useful

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

The Answer 16

-3 people think this answer is useful

HTML

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

CSS

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

Add a Comment