Search code examples
htmlcsscss-tables

Controlling Spacing Between Table Cells

I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this.

I tried setting td margins but it seems to have no effect.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}

If I do the same thing with padding, it works, but then I don't have the spacing between cells.

Could someone help me with this?

table.test td {
  background-color: lime;
  margin: 12px 12px 12px 12px;
  /*padding: 12px 12px 12px 12px;*/
}
<table class="test">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

Solution

  • Use the border-spacing property on the table element to set the spacing between cells.

    Make sure border-collapse is set to separate (or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).