How to display Border only around the Table using CSS?

Border only around the Table

To display border only around the table using CSS, set CSS border property only for the table, and not for table heading and table cells, with the required border value.

By default, table does not display any border.

table {
  border: 1px solid red;
}

Examples

1 Set border for table only

In the following example, we take a table with two columns, and three rows; and set a border of width 1px, solid style, and red color.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    table {
      border: 1px solid red;
    }
  </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>

Conclusion

In this CSS Tutorial, we learned how to use CSS border property to display border only around the table, with examples.