Setting space between table cells only

Question

In my table, I want to set the space between cells only so that there is no gap between two cells between the table cell and the table itself. My HTML table is 2 columns and 2 rows, as shown below:

<table class="president-table" border="0"> <tbody> <tr> <td> some text </td> <td> <img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img> </td> </tr> <tr> <td> </td> <td> <img src="images/kate-240x300.jpg" width="240" height="300" /> </td> </tr> </tbody> </table> 

I used the following CSS:

 .president-table{ border-collapse: separate; border-spacing: 15px 0px; } 

the table should look like this:

TABLE TOP

| TD TD |

| TD TD |

TABLE END

there is no space between TD and TR only between two two TDs. offers?

Answer 1

It is not possible to achieve the desired effect using border-spacing , as this adds space around each cell, not only between the “inner” cells.

Filling cells does not work, because it also enlarges cells on all four sides.

If you can use CSS3, you can try

 table.test td:not(:last-child) { padding: 0 10px 0 0; } 

If you do not have CSS3, you will have to add style to all but the last TD in each row, which gives the cell the correct complement (or all but the first, with the left complement).

Note. It is impossible to get space outside the cell because the tables swallow the margin ( It is impossible to place a marker on the <td> tag with either a CSS attribute or a cell attribute )

Demo version

Answer 2

I believe that you will need some extra HTML, but not so bad. The main problem, as noted by AaronDigulla, is that you cannot set separate cell-padding for cells in the same table. Thus, the way around the problem is to use additional elements and their style.

 <tr> <td>Cell</td> <td> <div class="mid_col">Cell</div> </td> <td>Cell</td> </tr> 

Now you don’t need any additions / cell intervals - you can just stylize the div .mid_col and you go to the races.

 /* No spacing on the cells */ table{ border-collapse: collapse; border-spacing: 0px; } /* General cell styling - also styling the new divs to match */ .mid_col, td { padding: 12px; } /* This takes the vertical spacing off of the tds holding the new divs It also sets the space between each column (here 25px) */ td:nth-of-type(2){ padding:0px 25px; } 

http://jsfiddle.net/daCrosby/7JufT/77/

Answer 3

Live demo

You try this, hope your problem is resolved.

HTML:

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

CSS

 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'); } 

Answer 4

This will be done:

 .president-table{ border-collapse: separate; border-spacing: 15px 15px; /* notice the second 15px '/ } 

Also in your first tag, you incorrectly set quotation marks "" in the src and class attributes.

Here's how it should look

 <img class="alignnone" src="images/lili-239x300.jpg" width="239" height="300"></img>