CODEWITHSUNDEEP
htmlcss
MrMeszaros
MrMeszaros

Reputation: 643

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

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:

  1. The image was drawn by hand (MS-Paint) only for illustration.
  2. 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!

Upvotes: 7

Views: 5574

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 9

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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>

Upvotes: -1

Related Questions