CSS border-collapse Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-collapse property in CSS is used to control the spacing and border styling of table elements. It determines how the borders of table cells are combined or separated.

This property can help create cleaner and more compact table layouts by specifying how adjacent borders should interact.

💡 Syntax

The syntax for the border-collapse property is simple. It can be applied to the <table> element, and it accepts two values:

Syntax

Copied

table {
  border-collapse: value;
}

Here, value can be either collapse or separate.

🎛️ Default Value

The default value of the border-collapse property is separate. This means that the borders of table cells are rendered as distinct and separate from each other.

🏠 Property Values

collapse:

Borders of adjacent table cells are collapsed into a single border. This value creates a cleaner look by removing any extra space between borders.
CSS
Copied
```
table {
  border-collapse: collapse;
}
```
separate:

Borders of adjacent table cells are kept separate. This is the default behavior where each cell’s border is distinct and does not combine with adjacent cells.
CSS
Copied
```
table {
  border-collapse: separate;
}
```

📄 Example 1: Collapsed Borders

In this example, the borders of adjacent table cells are collapsed into a single border.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-collapse Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Table with Collapsed Borders</h1>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </table>
</body>
</html>

📄 Example 2: Separate Borders

In this example, the borders of adjacent table cells are kept separate.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-collapse Example</title>
  <style>
    table {
      border-collapse: separate;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Table with Separate Borders</h1>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </table>
</body>
</html>

🖥️ Browser Compatibility

The border-collapse property is widely supported across all major modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It's always recommended to verify the rendering across different browsers to ensure consistent appearance.

🎉 Conclusion

The border-collapse property is essential for managing the visual presentation of table borders. By choosing between collapse and separate, you can control whether borders are merged or kept distinct, allowing for flexible and visually appealing table designs. Experiment with this property to achieve the layout that best suits your needs.