HTML table cell spacing - only between cells, no outer one

Question

I am trying to add cell spacing to a html table.

I want to add spacing between cells without the outer spacing.

My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.

cellspacing image

I would like to put cell spacing without the red (outer) part - only the yellow one.

Is it possible?

Edit:

The image was drawn by hand (MS-Paint) only for illustration.
The coloring is for debugging - so that one can see where the borders, and spacing is.

I have found a roundabout solution including some additional div-s:

.inner-spacing {
  border-collapse: collapse;
  background-color: yellow;
  border: 2px solid black;
}
.inner-spacing td {
  padding: 0;
}
.inner-spacing td > div {
  width: 60px;
  height: 60px;
  background-color: green;
  border: 2px solid black;
  margin: 10px;
}
.inner-spacing tr:first-child > td > div {
  margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
  margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
  margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
  margin-right: 0px;
}

<table class="inner-spacing">
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
  <tr>
    <td>
      <div/>
    </td>
    <td>
      <div/>
    </td>
  </tr>
</table>

So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).

I wonder if there are some other solutions - so any new solution is welcome!

@PraveenKumar I think is needed it otherwise I have to smell my fingers :) — Alex Char, Jul 16 '15 at 13:42

Bhuwan · Accepted Answer · 2018-02-17T19:05:41.877

This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing

Stack Snippet

table {
  font: bold 13px Verdana;
  background: black;
  margin: 30px auto;
  border-spacing: 0;
}

table td {
  padding: 30px;
  background: red;
  color: #fff;
}

table tbody {
  margin: -10px;
  display: block;
  border-spacing: 10px;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

Praveen Kumar Purushothaman · Answer 2 · 2015-07-16T13:43:39.010

-1

This is kinda tricky, you need to follow something like this:

table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

edited Jul 16 '15 at 13:43

answered Jul 16 '15 at 13:42

Praveen Kumar Purushothaman

164,888
24
203
252

@AlexChar I don't understand, sorry. – Praveen Kumar Purushothaman Jul 16 '15 at 13:45
I mean the first version before the edit. Is more accurate. – Alex Char Jul 16 '15 at 13:49
@AlexChar nopes. That doesn't actually answer the question. `:)` – Praveen Kumar Purushothaman Jul 16 '15 at 13:50
Then OP have to decide ;) – Alex Char Jul 16 '15 at 13:52
2

@PraveenKumar I don't think your new version answers the question either. The OP says _I would like to put cell spacing without the red (outer) part - only the yellow one._, but there appears to be no spacing at all in your table (so no yellow part). – Hidden Hobbes Jul 16 '15 at 14:12
2

@HiddenHobbes is right. The first version had the red and the yellow part, and the secont does not have either. I updated the question, and added a runnable snippet witch 'sorta' solves the problem - I hope this clarifies the question. – MrMeszaros Jul 18 '15 at 12:32

HTML table cell spacing - only between cells, no outer one

Edit:

2 Answers2

Linked