How to Add a Border-Bottom to the Table Row

Solution with the CSS border-bottom property

If you want to add a border only to the bottom of the table row, you can apply the CSS border-bottom property to <td> elements that are placed within a <tr> tag.

Let’s see this solution in use.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of adding a border-bottom to the table row:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      tr.border-bottom td {
        border-bottom: 1pt solid #ff000d;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr class="border-bottom">
          <td>Text 1</td>
          <td>Text 2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Try it Yourself »

Result

Text 1

Text 2

As you can note in the example above, there is spacing between our <td> elements. If you need to remove the spacing between them, try the following example, where we add the border-collapse property set to “collapse” to the <table> element.

Example of removing the spacing between <td> elements with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }     
      tr.border-bottom {
        border-bottom: 1px solid #ff000d;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr class="border-bottom">
          <td>Text 1</td>
          <td>Text 2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>