How to add border-bottom to table row with CSS?

Sometimes, we want to add border-bottom to table row with CSS.

In this article, we’ll look at how to add border-bottom to table row with CSS.

How to add border-bottom to table row with CSS?

To add border-bottom to table row with CSS, we apply the border-collapse: collapse; style on the table.

For instance, we write

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

to add a table.

Then we write

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1pt solid black;
}

to apply the border-collapse: collapse; style on the table to let us show the borders on the table rows.

Then we apply border-bottom: 1pt solid black; to the tr elements to add a bottom border.

Conclusion

To add border-bottom to table row with CSS, we apply the border-collapse: collapse; style on the table.