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