Add border-bottom to table row <tr>

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.

Answer 1

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

Answer 2

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