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


i trying add cell spacing html table.

i want add spacing between cells without outer spacing.

my problem is, cellspacing html attribute , border-spacing css property adds spacing outside too.

cellspacing image

i put cell spacing without red (outer) part - yellow one.

is possible?

edit:

  1. the image drawn hand (ms-paint) illustration.
  2. the coloring debugging - 1 can see borders, , spacing is.

i have found roundabout solution including 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 summarize, table have border spacing table border collapsing onto cells (no spacing).

i wonder if there other solutions - new solution welcome!

this kinda tricky, need follow 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>


Comments