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.