Need help with styling a table: how to add margin to one cell ?

Question

Consider this code:

HTML:

<table>
    <tr>
        <td>Option 1</td>
        <td><input type='checkbox' id='option1' /></td>
    </tr>
    <tr>
        <td>Option 2</td>
        <td><input type='checkbox' id='option2' /></td>
    </tr>
    <tr>
        <td>Option 3</td>
        <td><input type='checkbox' id='option3' /></td>
    </tr>
    <tr>
        <td id='go' colspan=2>Go</td>
    </tr>
</table>

CSS:

td {
    border: 1px solid black;
}
#go {
    text-align: center;
    cursor: pointer;
    background: #aaa;
}

Is that possible to set the position of the Go cell 10px below the current position ?

I tried to play with margin-top and cellspacing but it didn't help.

Is that possible to do that ?

Answer 1

It depends on what you want to be in those 10 pixels. If you want to just move word 'go' down, padding-top will work: http://jsfiddle.net/4G6a5/
Or do you want blank space there? Additional 10px-high row or nested element with margin will work, depending on how you want border to look.

Answer 2

Did you try padding-top?

Answer 3

try

padding-top:10px;

Answer 4

I don't believe you can set the margin on a td element.

This is a nasty hack, but you could just insert another row with height="10px":

<tr>
    <td>Option 3</td>
    <td><input type='checkbox' id='option3' /></td>
</tr>
<tr height="10px" />
<tr>
    <td id='go' colspan=2>Go</td>
</tr>

Things like this are why people shy away from table layouts. Anytime you are adding "invisible" tr's or td's to affect the layout of elements, you start to feel dirty.

The other option that might work for you would be to set the #go padding to "10px" so that the button has 10px of padding on every side. Using just padding-top = 10px will make the button look funny, b/c the word Go will be pushed down.

#go {
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background: #aaa;
}