CSS table border spacing inside only

Question

I have trying to work this out for months, and Google hasn't helped me. I'm trying to have spacing between <td> and <th> tags in a table, but when I do, it does spacing in the outside. Therefore, the table isn't inline with anything else. So it looks like the table has some padding.

I can't seem to find a solution.

Here is an example of the issue

Answer 1

Had the same problem, the border spacing property was adding space around the table as well, and to my knowledge, there wasn’t anyway to limit it to only ‘the inside’, so I used transparent borders instead:

table td {    border-left: 1em solid transparent;    border-top: 1em solid transparent; } 

This sets ‘border spacing’ as normal, except that there’s ‘unwanted’ spacing at the top and left of the table.

table td:first-child {    border-left: 0; } 

Selects the first column.

table tr:first-child td {    border-top: 0; } 

Selects the td elements of the first row (assuming that the top of the table starts with a tr element, change accordingly for th).

Answer 2

I optimized the solution with transparent border so it has no more obliquely cut inner borders.

1) let table fill horizontal and collapse the borders:

table {   width: 100%;   border-collapse: collapse; } 

2) Set all borders of table cells to width 0 and prevent background is drawn below the border.

td {   border: 0px solid transparent;   background-clip: padding-box; } 

3) Set inner space with transparent border but not to first row and column.

tr > td + td {   border-left-width: 10px; }  tr + tr > td {   border-top-width: 10px; } 

here is a jsbin