CSS Border Collapse

The CSS border-collapse property is used to specify whether the borders of a table should be collapsed into a single border or separated. It is primarily used in tables to control the behavior of borders between table cells.

Key Points on CSS Border Collapse:

• The border-collapse property has two values: collapse and separate.
• When set to collapse, the borders of adjacent cells merge into one single border.
• When set to separate, each cell will have its own border.
• By default, the border-collapse property is set to separate.
• For collapsed borders, the border-spacing property is not applicable.
• Setting the border-collapse: collapse; property is useful for creating a compact table design.

Syntax for CSS Border Collapse:

        /* Border collapse syntax */
        .table {
            border-collapse: collapse;
               }
        
        /* Separate borders syntax */
        .table {
            border-collapse: separate;
               }

Examples of CSS Border Collapse:

The following examples demonstrate the usage of the border-collapse property:

            .table {
            border-collapse: collapse;
            width: 100%;
                   }
            th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

            .table {
            border-collapse: separate;
            border-spacing: 10px;
            width: 100%;
                   }
        
            th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
                   }

Common Border Collapse Properties:

• border-collapse: Controls whether table borders are collapsed or separate. Possible values are collapse and separate.
• border-spacing: Defines the space between borders when the border-collapse is set to separate.

Using border-collapse: collapse; is typically preferred for tables that need a neat, compact look without any extra spacing between cells. The border-collapse: separate; setting allows for more flexible table layouts with space between table cells.