How to remove cellspacing from tables using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS border-collapse property

By default, there is some space between the borders of adjacent table cells, because the default border modal for the HTML tables is separated. But, you can overwrite this and create a table with collapsed border or without any cellspacing by simply setting the CSS border-collapse property value for the <table> elements to collapse, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Remove Cellspacing in CSS</title>
  • <style type="text/css">
  •     table{
  •         border-collapse: collapse; /* Remove cell spacing */
  •     }
  •     table, th, td{
  •         border: 1px solid #666;
  •     }
  •     table th, table td{
  •         padding: 10px; /* Apply cell padding */
  •     }
  • </style>
  • </head>
  • <body>
  •     <table>
  •         <thead>
  •             <tr>
  •                 <th>Row</th>
  •                 <th>First Name</th>
  •                 <th>Last Name</th>
  •                 <th>Email</th>
  •             </tr>
  •         </thead>
  •         <tbody>
  •             <tr>
  •                 <td>1</td>
  •                 <td>Clark</td>
  •                 <td>Kent</td>
  •                 <td>clarkkent@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>2</td>
  •                 <td>Peter</td>
  •                 <td>Parker</td>
  •                 <td>peterparker@mail.com</td>
  •             </tr>
  •             <tr>
  •                 <td>3</td>
  •                 <td>John</td>
  •                 <td>Rambo</td>
  •                 <td>johnrambo@mail.com</td>
  •             </tr>
  •         </tbody>
  •     </table>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.