Set Height for Table Headings

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

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

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

Examples

1. Set 60px height for table headings

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

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    th {
      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 headings, with examples.