Tutorials


CSS border-collapse property


The border-collapse property in CSS is used to specify whether the borders of adjacent table cells should be collapsed into a single border or remain separate. This property is applicable to <table> elements and affects the table's layout and appearance.

Syntax

table {
  border-collapse: value;
}
  • table: The HTML table element to which you want to apply the border collapse setting.
  • value: The value you want to apply to the border-collapse property.

Values

  1. collapse:

    • Description: Specifies that adjacent table cell borders should be collapsed into a single border. When borders are collapsed, the table cells share a single border, which results in a more compact appearance.
    • Example: border-collapse: collapse;

  2. separate:

    • Description: Specifies that adjacent table cell borders should be kept separate. This value allows for distinct borders between table cells, which results in a more spaced-out appearance. The border-spacing property can also be used to control the space between borders in this mode.
    • Example: border-collapse: separate;

Usage Example

Here’s how to use the border-collapse property in CSS:

Example

/* Table with collapsed borders */
table.collapsed {
  border-collapse: collapse; /* Borders are collapsed into a single border */
}

table.collapsed th, table.collapsed td {
  border: 1px solid black; /* Apply a border to table cells */
  padding: 8px; /* Add padding to table cells */
}

/* Table with separate borders */
table.separated {
  border-collapse: separate; /* Borders are kept separate */
  border-spacing: 5px; /* Space between the borders of adjacent cells */
}

table.separated th, table.separated td {
  border: 1px solid black; /* Apply a border to table cells */
  padding: 8px; /* Add padding to table cells */
}

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Collapse Example</title>
  <style>
    /* Include the CSS from the example above here */
  </style>
</head>
<body>
  <h2>Collapsed Borders</h2>
  <table class="collapsed">
    <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>

  <h2>Separated Borders</h2>
  <table class="separated">
    <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>

Explanation:

  1. table.collapsed:

    • Uses border-collapse: collapse; to ensure that adjacent cell borders are collapsed into a single border. This results in a table where cell borders are merged.

  2. table.separated:

    • Uses border-collapse: separate; to keep borders between cells distinct. The border-spacing property is used to control the space between the borders of adjacent cells.

Important Points

  1. Browser Compatibility:

    • The border-collapse property is widely supported in modern browsers. However, testing across different browsers is recommended to ensure consistent behavior.

  2. Effect on Table Layout:

    • The collapse value provides a cleaner, more compact table appearance by merging borders, while the separate value allows for more spacing between cells and distinct borders.

  3. Border Spacing:

    • When using border-collapse: separate;, you can control the space between the borders of adjacent cells using the border-spacing property.

  4. Inherited Property:

    • The border-collapse property is not inherited by child elements. It only affects the table it is applied to.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about