Setting space between table cells only

Question

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

<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 the TD and TR only between each two TD's. suggestions?

Answer 1

It's not possible to achieve the desired effect with border-spacing since that adds space around each cell, not only between "inner" cells.

Cell padding doesn't work because it also grows the cells on all four sides.

If you can use CSS3, then you can try

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

If you don't have CSS3, then you'll have to add a style to all but the last TD in each row which gives the cell a right padding (or all but the first with a left padding).

Note: There is no way to get space outside of the cell because tables swallow the margin (Cannot put margin on <td> tag with neither CSS nor cellspacing attribute)

Demo.

Answer 2

I believe you're going to need a bit of extra HTML, but not too bad. The basic problem, as AaronDigulla noted, is that you can't set a separate cell-padding for cells in a single table. The way around the issue, then, is to use extra elements and style them instead.

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

Now you don't need any cell padding/spacing at all - you can just style the .mid_col divs and you're off 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/