How to remove cellspacing from tables using CSS?

Last Updated : 01 Dec, 2020

This is a Default behavior of the table cells that there is some space between their Borders. To remove this space we can use the CSS border-collapsing Property. This Property 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: collapse;

Example:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
         Remove cellspacing from tables using CSS 
        </title>  
          
        <!-- border-collapse CSS property -->
        <style>  
            table, td, th {  
                border: 2px solid black;  
            }  
              
            #collapseTable {  
                border-collapse: collapse;  
            }  
        </style>  
    </head>  
  
    <body>  
        <h2>  
Before using the border Collapsing Property 
        </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>  
After using the border collapsing Property 
        </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> 