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 and tags in a table,

Answer 1

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

Answer 2

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

Answer 3

Here is a simple and clean solution.

HTML

<div class="column-container">
  <div class="column-children-wrapper">
    <div class="column">One</div>
    <div class="column">Two</div>
    <div class="column">Three</div>
    <div class="column">Four</div>
  </div>
</div>

CSS

.column-container {
  display: table;
  overflow: hidden;
}

.column-children-wrapper {
  border-spacing: 10px 0;
  margin-left: -10px;
  margin-right: -10px;
  background-color: blue;
}

.column {
  display: table-cell;
  background-color: red;
}

https://jsfiddle.net/twttao/986t968c/

Answer 4

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 5

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/

Answer 6

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