Controlling Spacing Between Table Cells

HtmlCssCss Tables

Html Problem Overview

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?

jsFiddle: http://jsfiddle.net/BfBSM/

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

Check this fiddle. You are going to need to take a look at using border-collapse and border-spacing. There are some quirks for IE (as usual). This is based on an answer to this question.

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

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  *border-collapse: expression('separate', cellSpacing='10px');
}


<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 3 - Html

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

Solution 4 - Html

To get the job done, use

<table cellspacing=12>

If you’d rather “be right” than get things done, you can instead use the CSS property border-spacing, which is supported by some browsers.

Solution 5 - Html

Use border-collapse and border-spacing to get spaces between the table cells. I would not recommend using floating cells as suggested by QQping.

JSFiddle

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Css Tables Solutions

Previous Solution:

Getting 'DatabaseOperations' object has no attribute 'geo_db_type' error when doing a syncdb

DjangoHerokuGeodjango

Next Solution:

How to stop Dart's .forEach()?

Dart

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJonathan WoodView Question on Stackoverflow
Solution 1 - HtmlQuentinView Answer on Stackoverflow
Solution 2 - HtmlBuggabillView Answer on Stackoverflow
Solution 3 - HtmlWeb Designer cum PromoterView Answer on Stackoverflow
Solution 4 - HtmlJukka K. KorpelaView Answer on Stackoverflow
Solution 5 - HtmlHalcyonView Answer on Stackoverflow