How to Remove Spacing Between Table Borders with CSS

When you use CSS to put a border on your <th> and <td> tags, you will notice that you get space between them. In the old days, you would remove that space using the now-deprecated cellspacing attribute. These days, you do it with the CSS border-collapse property.

1. Start with a simple table:

   <table>
     <thead>
       <tr>
         <th>Header</th>
         <th>Header</th>
         <th>Header</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Data</td>
         <td>Data</td>
         <td>Data</td>
       </tr>
     </tbody>
     <tfoot>
       <tr>
         <td>Data</td>
         <td>Data</td>
         <td>Data</td>
       </tr>
     </tfoot>
   </table>

2. Add borders:

   <style>
   th, td {
     border: 1px solid #006;
   }
   </style>

   Now your table looks like this:
3. Collapse the borders with border-collapse:

   <style>
   table {
     border-collapse: collapse;
   }
   </style>

   And voilà, your borders are collapsed: