Border issues on HTML Table

I have a table where I don't want any internal border, except the one that separate header from lines.

In my css, I have:

table { ... border-width: 2px; border-color: #ddd; border-style: solid; } table th { border-collapse: collapse; border-bottom: 2pt solid #830504; padding: 4px 8px ; text-align: center; } table tr { padding:4px; } table td { border-collapse: none; padding:4px; } 

And I get the following

How can I get rid off those 2 spaces at the right and left of the th bottom border?

4 Answers

The problem probably comes from the fact you are using border-collapse on td and th but not the table.

Here's the difference :

.collapse { border-collapse: collapse } table { border: 1px solid black; } th { border-bottom: 1px solid black; }

<table> <thead> <tr> <th>Head</th> <th>Header</th> <th>Bob</th> </tr> </thead> <tbody> <tr> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> <tr> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> </tbody> </table> <table> <thead> <tr> <th>Head</th> <th>Header</th> <th>Bob</th> </tr> </thead> <tbody> <tr> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> <tr> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> <td>Lorem Ipsum</td> </tr> </tbody> </table>

Use this as a minimum basic table css

.tbl { width: 100%; /* you may change the width in % */ margin: 0 auto; box-sizing: border-box; overflow-x: auto; } .tbl * { margin: 0; box-sizing: border-box; } table { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 0; background-color: transparent; } thead, tbody, tr { width: inherit; } th, td { vertical-align: top; text-align: left; hyphens: auto; white-space: normal; } @media (max-width: 767.9px) { table { border: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } } 

With this html

<div> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>Data 11</td> <td>Data 12</td> </tr> <tr> <td>Data 21</td> <td>Data 22</td> </tr> </tbody> </table> </div> 

With this css, your table is responsive for all screen sizes and you only have to give some colors and/or borders to the th and td

using the CSS you provided just add border-spacing: 0; to your table style

table { border-width: 2px; border-color: #ddd; border-style: solid; border-spacing: 0; } 

You can view it working here

Reset the border-spacing which has a default of c.2px.

If you set this to 0, the issue is resolved.

table { border-width: 2px; border-color: #ddd; border-style: solid; margin: 1em auto; border-spacing: 0; /* this */ } table th { border-collapse: collapse; border-bottom: 10pt solid #830504; padding: 8px; text-align: center; } table tr { padding: 8px; } table td { padding: 4px; border-collapse: none; }

<table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> </table>