How to Add Border-Bottom to Table Row ?

The “border-bottom” property of CSS is utilized to add the border at the bottom of any HTML element. Although, it does not directly affect the table row. The reason is that the border-collapse property has separate as a predefined value and it does not allow the style of the row. This guide illustrates how to apply a bottom border to <tr> of the table element.

How to Add Border-Bottom to Table Row <tr>?
Set border-bottom to Table Row <tr> Element
Style Table Element
Style “td” Element
Style “tr” Element

How to Add Border-Bottom to Table Row <tr>?

Adding the border-bottom to the table row will add the border to the whole row to make a better visual experience and to attract the user’s focus.

A detailed example of adding border-bottom to table row <tr> is demonstrated below:

Set border-bottom to the Table Row <tr>

Create a simple table containing 3 rows and 3 columns in our HTML file which are made using <td>, <th> and <tr> elements:

<table>
<tr class="row">
<th>Name</th>
<th>Status</th>
<th>Room No</th>
</tr>
<tr class="row">
<td>Fakhar</td>
<td>Student</td>
<td>05</td>
</tr>
<tr class="row">
<td>Omar</td>
<td>Student</td>
<td>05</td>
</tr>
</table>

In the above code snippet, we have assigned a class of “row” to the table rows <tr>, so that it can be accessed later in the CSS.

The webpage will look like this:

Style Table Element

In the CSS portion select the table element and align the text to the center. After that, use the “border-collapse” property to set its value to collapse:

table
{
border-collapse: collapse;
text-align: center;
}

Style “td” Element

For a better visual representation, let us give padding of 20px to the table data “<td>” and table header “<th>” elements:

td
{
padding:20px;
}
th
{
padding:20px;
}

The output look like this:

The above output has shown the padding of 20px and aligned the text to the center.

Style “tr” Element

In the CSS file, add the border-bottom property under the “tr” selector. It assigns to every row of the table including the heading row. For instance, set its value to 2px solid darkcyan:

tr{
border-bottom: 2px solid darkcyan;
}

After executing the above code snippet, the webpage looks like this:

That is all about how to add a border at the bottom of every table row “

”.

Conclusion

To add a border at the bottom of the <tr> element, set the CSS property border-collapse to collapse and use the border-bottom property on the “<tr>” element. It allows the CSS property to apply borders on the table. That is how you can easily add a border-bottom to every “<hr>” tag.

How to Add Border-Bottom to Table Row ?