add margin to table header

On this page I would like to add a white gap between the background of the "Before" and "After table headings, that aligns with the gap between the photos in each column

I've tried setting the width, max-width and margin-right proper开发者_如何学JAVAties of the "Before" heading and also tried setting the margin-left of the "After" heading, but none of these seem to work.

Thanks, Don

Easiest way is using colgroup and set a border to act as margin.

<table>
    <colgroup />
    <colgroup style="border-left:5px solid #fff;" />

See also: http://jsfiddle.net/gwYaQ/

A table is easiest I admit, but it's not really tabular data is it. You're abusing the table for layout =P

Info about colgroup: http://www.w3schools.com/tags/tag_colgroup.asp

There's a rather dirty way, but does the job:

<tr>
    <th>Before</th>
    <th style="width: 10px; background: none;">&nbsp;</th>
    <th>After</th>
</tr>
<tr>
    <td>IMG1</td>
    <td>&nbps;</td>
    <td>IMG2</td>
</tr>

I don't think you can achieve that simply changing your CSS.

The white gap between the photo is due to the table cells padding-right (10px), so it's "inside" the cell.

The gradient in the heading being the backgound of the heading cells, a white space between them would have to be "ouside".

On way to fix this would be to add a 10px wide column between the 2 columns. Another is to use colgroup.

But BGerrissen is right : you should not use for that.

th {
    padding-left: 50px;
}

td {
    padding-left: 50px;
}