WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
SPONSORED LINKS
Advertisements

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 without any cellspacing by simply setting the CSS border-collapse property value for the <table> element to collapse, as shown in the example below:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Remove Cellspacing in CSS</title>
  • <style>
  •     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:

Advertisements

Your Feedback:

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