65

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

1
  • how far are you with coding could you add some jsfiddle ? Jan 10, 2012 at 15:54

6 Answers 6

27

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

3
  • This is the answer!
    – incleaf
    Feb 9, 2017 at 4:55
  • This is definitely the best way to go!
    – Kent
    Jan 11, 2019 at 4:32
  • I'd love to upvote twice...
    – Risadinha
    Jan 19, 2022 at 10:34
26

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).

3
  • 8
    While a clever trick, this isn't really useful to anyone who already uses the border properties for the styling of the cells themselves.
    – animuson
    Aug 17, 2013 at 1:57
  • @vsync is correct - the transparent border just shows the background colour of the cell. So it looks like the cell padding is just getting bigger. Feb 25, 2015 at 20:48
  • 1
    @vsync: It works fine, if you also use the CSS property background-clip: padding-box;. No background is drawn below the border (background extends to the outside edge of the padding).
    – TLindig
    May 22, 2015 at 14:48
21

I found a way to do this with negative margins and improves on Steven's answer in that it lets you make the table take up 100% even if it doesn't have enough content. The solution is to make the table width 100% and use a negative margin on a containing element:

#container {
    margin: 0 -10px;
}
table {
    border-collapse: separate;
    border-spacing: 10px;
}
td, th {
    background-color: #ccf;
    padding: 5px;
}

See it as a jsFiddle

7
  • @vsync what do you mean exactly? It is still working for me (in Firefox) in the jsFiddle I linked to with a table width 100%. Sep 15, 2014 at 13:34
  • ho sorry, yeah cause you are wrapping it with a div so it works, but for the table itself, negative margin on both sides wouldn't work..I didn't explain myself, my bad
    – vsync
    Sep 15, 2014 at 15:46
  • @vsync Yes, you do need to wrap it with a div for this particular solution to work. Sep 15, 2014 at 18:18
  • Yes, I do know you need to wrap it with a div for this particular solution to work. But it's always nice to hear it again.
    – vsync
    Sep 16, 2014 at 7:27
  • Excellent! Thanks.
    – Jerry
    Dec 23, 2016 at 10:23
10

Similar to what Steven Vachon said, negative margin may be your best bet.

Alternatively, you can use calc() to fix the problem.

CSS:

/* border-collapse and border-spacing are css equivalents to <table cellspacing="5"> */

.boxmp {
    width:100%;
    border-collapse:separate;
    border-spacing:5px 0;
}

/* border-spacing includes the left of the first cell and the right of the last cell
    negative margin the left/right and add those negative margins to the width
    ios6 requires -webkit-
    android browser doesn't support calc()
    100.57% is the widest that I could get without a horizontal scrollbar at 1920px wide */

.boxdual {
    margin:0 -5px;
    width:100.57%;
    width:-webkit-calc(100% + 10px);
    width:calc(100% + 10px);
}

Just add whatever margin you take off or the width will be too narrow (100% isn't wide enough).

1
  • I would consider this the best answer as calc is widely supported now.
    – Andrew
    Apr 12, 2016 at 12:38
4

Here is the cool hack to do that

table {
    border-collapse: inherit;
    border-spacing: 10px;
    width: calc(100% + 20px);
    margin-left: -10px;
}

use margin-left: -10px; to remove left padding but in the right there will be 20px padding. Now to update it use width: calc(100% + 20px);

3

Use negative margins and a container with positive padding.

#container {
    box-sizing: border-box; /* avoids exceeding 100% width */
    margin: 0 auto;
    max-width: 1024px;
    padding: 0 10px;    /* fits table overflow */
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 10px;
    margin: 0 -10px;    /* ejects outer border-spacing */
    min-width: 100%;    /* in case content is too short */
}

td {
    width: 25%;     /* keeps it even */
}

Just make sure that you have substantial content for it to stretch the table to 100% width, or else it'll be 20px too narrow.

More info: svachon.com/blog/inside-only-css-table-border-spacing/

2
  • 1
    This does not work for tables which by themselves do not expand to the 100% width. See jsfiddle.net/EXe8z (just cut off the last two columns). You'll end up with triple padding on the right side and normal padding on the left side.
    – animuson
    Aug 17, 2013 at 1:51
  • 1
    I already stated this in my answer: "Just make sure that you have substantial content for it to stretch the table to 100% width". Most applications I build that use tables have more than single-digit-length content. Dec 28, 2013 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.