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?

Did you try using `border-collapse: collapse` on your table. — Danield, Oct 02 '13 at 07:34
What is the end goal? There may be a better approach to your desired result than trying to uniquely space individual table cells in the same table. — DACrosby, Oct 02 '13 at 07:59
i have a table. sadly, it must be a table. i which there are two columns, i need to make space between those two columns but there can be no space between the TD itself and the edge of the table — antonpuz, Oct 02 '13 at 08:03

score 8 · Accepted Answer · edited May 23 '17 at 12:06

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.

thank you for the informative answer. i will look into it now. — antonpuz, Oct 02 '13 at 08:17

score 2 · Answer 2 · answered Oct 02 '13 at 08:47

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/

i thought about this idea, but always perfered using the margin. if no other solution comes up i will do it. thanks. — antonpuz, Oct 02 '13 at 09:06
@Anton.P it's basically the same using `margin`, just set `td:nth-of-type`'s padding to `0px` and add margin to `.mid_col` http://jsfiddle.net/daCrosby/7JufT/78/ — DACrosby, Oct 02 '13 at 09:24

score 0 · Answer 3 · answered Oct 02 '13 at 07:32

0

Live Demo

You sholud try this, hope your problem solve.

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

answered Oct 02 '13 at 07:32

NaYaN

1,300
7
11

hello, there is still space between the TD's and the table's edge. the goal is to create space only between each two TD's – antonpuz Oct 02 '13 at 07:35
it doesnt make space between the two TD's my friend. – antonpuz Oct 02 '13 at 07:48
It does vertically. Use `border-spacing: 10px 0px;` to have horizontal spacing. http://jsfiddle.net/daCrosby/7JufT/76/ – DACrosby Oct 02 '13 at 07:49
1

i need horizontal spacing only between the TD's and not between the TD and the TR. – antonpuz Oct 02 '13 at 07:50

score -1 · Answer 4 · answered Oct 02 '13 at 07:41

-1

This will do it:

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

Also in your first tag you are setting the quotes "" on the src and class attribute wrongly.

This is how it should look

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

answered Oct 02 '13 at 07:41

user1021726

638
10
23

hi, what you suggested added another unwanted padding on the top instead of making the padding on the left and right disappear. – antonpuz Oct 02 '13 at 07:46
Then remove the first 15px as that will add padding to the right of your td's. you could also try .president-table td { margin: 10px }; as it should only add spaces between the cells like you wanted. – user1021726 Oct 02 '13 at 07:48
1

margin has no effect when it comes to tables. – antonpuz Oct 02 '13 at 08:05
-1 `border-spacing` adds space around all sides of the cell not only between inner cells. – Aaron Digulla Oct 02 '13 at 08:12

Setting space between table cells only

4 Answers4