How to add border-bottom to table row <tr> in CSS ?

Last Updated : 10 Jul, 2023

A border is an important component of any table in HTML. It is used to define the boundaries of the table and its elements. The border-bottom property is used to add a border to the bottom of an HTML element. In this article, we will discuss how to add a border-bottom to table row <tr>.

When applied to a table row, it creates a border that separates that row from the row below it. A border-bottom can be added to a table row “<tr>” in HTML to provide a visual separation between rows within a table. This can be useful for making tables easier to read and navigate. To add border-bottom to table row <tr>, we can the CSS border-bottom Property.

Approach 1: Add a border to every row: By using this approach you can target all <tr> elements within the table to apply a border-bottom to all rows.

Example: In this example, we added the CSS border-bottom property to every table row <tr> on the page. The border-bottom property creates a 1px solid black line at the bottom of each table row, providing a visual separation between rows.

However, we also needed to add the border-collapse: collapse; property to the table element to collapse the borders between table cells and allow the border-bottom on the table rows to display properly.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }
 
        tr {
            border-bottom: 1px solid black;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green; text-align: center">
          GeeksforGeeks
    </h1>
    <table align="center">
        <tr>
            <th>Header</th>
        </tr>
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
        </tr>
    </table>
</body>
 
</html>

Output:

Approach 2: Add a border to specific rows: If you want to add a border-bottom to specific rows then you can add a class attribute to the <tr> element to target that specific row and apply a border-bottom to it.

Example: In this example, we added the CSS border-bottom property to a specific table row <tr> with a class of “border-bottom” which creates a 1px solid black line at the bottom of the “border-bottom” table row.

We also added the border-collapse: collapse; property to the table element to collapse the borders between table cells and allow the border-bottom on the table rows to display properly.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }
 
        tr.border-bottom {
            border-bottom: 1px solid black;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green; text-align: center">
          GeeksforGeeks
    </h1>
    <table align="center">
        <tr>
            <th>Header</th>
        </tr>
        <tr class="border-bottom">
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr class="border-bottom">
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
        </tr>
    </table>
</body>
 
</html>