Set Height for Table Rows

To set a specific height for the table rows using CSS, set CSS height property for the table rows tr, with the required value, like 100px, 1em, etc.

The CSS code to set height for table rows is showing in the following.

</>
Copy
tr {
  height: 60px;
}

Examples

1. Set 60px height for table rows

In the following example, we take a table with two columns, three rows, and set the rows’ height to 60px;

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    tr {
      height: 60px;
    }
    table, th, td {
      border: 1px solid;
      border-collapse: collapse;
      padding: 10px;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>32</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>48</td>
      </tr>
      <tr>
        <td>Cherry</td>
        <td>75</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

You may change the height value, runt he program, and observe the output.

Conclusion

In this CSS Tutorial, we learned how to use CSS height property to set a specific height for the table rows, with examples.