Related Articles

Related Articles

CSS | border-collapse Property
  • Last Updated : 07 Aug, 2019

The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.

Syntax:

border-collapse: separate|collapse|initial|inherit;

Property Values:

  • separate: This property is used to set separate border of a cell.
  • collapse: It is used to collapse adjacent cells and make common border.
  • initial: It is used to set border-collapse property to its default value.
  • inherit: It is used when border-collapse property inherit from its parent elements.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>
            CSS border-collapse Property
        </title>
          
        <!-- border-collapse CSS property -->
        <style>
            table, td, th {
                border: 1px solid black;
            }
            #separateTable {
                border-collapse: separate;
            }
            #collapseTable {
                border-collapse: collapse;
            }
        </style>
    </head>
  
    <body>
        <h2>
            border-collapse: separate
        </h2>
          
        <table id = "separateTable">
            <tr>
                <th>Author Name</th>
                <th>Contact No</th>
            </tr>
            <tr>
                <td>Geek</td>
                <td>XXXXXXXXXX</td>
            </tr>
            <tr>
                <td>GFG</td>
                <td>XXXXXXXXXX</td>
            </tr>
        </table>
      
        <h2>
            border-collapse: collapse
        </h2>
          
        <table id = "collapseTable">
            <tr>
                <th>Author Name</th>
                <th>Contact No</th>
            </tr>
            <tr>
                <td>Geek</td>
                <td>XXXXXXXXXX</td>
            </tr>
            <tr>
                <td>GFG</td>
                <td>XXXXXXXXXX</td>
            </tr>
        </table>
    </body>
</html>                    

chevron_right


Output:



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>
            CSS border-collapse Property
        </title>
          
        <style>
            table, td, th {
                border: 1px solid black;
            }
              
            /* border spacing is used to specify the 
            width between border and adjacent cells */
            #separateTable {
                border-collapse: separate;
                border-spacing: 10px;
            }
            #collapseTable {
                border-collapse: collapse;
                border-spacing: 10px;
            }
            #initialTable {
                border-collapse: initial;
            }
        </style>
    </head>
      
    <body>
        <h2>
            border-collapse: separate
        </h2>
          
        <table id = "separateTable">
            <tr>
                <th>Author Name</th>
                <th>Contact No</th>
            </tr>
            <tr>
                <td>Geek</td>
                <td>XXXXXXXXXX</td>
            </tr>
            <tr>
                <td>GFG</td>
                <td>XXXXXXXXXX</td>
            </tr>
        </table>
          
        <h2>
            border-collapse: collapse
        </h2>
          
        <!-- border spacing property has no
        effect on border-collapse property-->
        <table id="collapseTable">
            <tr>
                <th>Author Name</th>
                <th>Contact No</th>
            </tr>
            <tr>
                <td>Geek</td>
                <td>XXXXXXXXXX</td>
            </tr>
            <tr>
                <td>GFG</td>
                <td>XXXXXXXXXX</td>
            </tr>
        </table>
          
        <h2>
            border-collapse: initial
        </h2>
          
        <table id="initialTable">
            <tr>
                <th>Author Name</th>
                <th>Contact No</th>
            </tr>
            <tr>
                <td>Geek</td>
                <td>XXXXXXXXXX</td>
            </tr>
            <tr>
                <td>GFG</td>
                <td>XXXXXXXXXX</td>
            </tr>
        </table>
    </body>
</html>                                

chevron_right


Output:

Supported Browsers: The browser supported by border-collapse property are listed below:

  • Google Chrome 1.0
  • Internet Explore/Edge 5.0
  • Firefox 1.0
  • Opera 4.0
  • Apple Safari 1.2



My Personal Notes arrow_drop_up
Recommended Articles
Page :