WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

How to remove cellspacing from tables using CSS

Topic: HTML / CSSPrev|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:

Your Feedback:

We would love to hear from you, please drop us a line.