Search code examples
htmlcsshtml-table

Add border-bottom to table row <tr>


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.


Solution

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