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

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