Question

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

是否可以将Go单元格的位置设置为低于当前位置10px？

我尝试使用margin-top和cellspacing，但它没有帮助。

这可能吗？

Answer 1

我不相信你可以在td元素上设置边距。

这是一个讨厌的黑客攻击，但你可以插入另一行高度为“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>

这就是人们回避桌面布局的原因。无论何时你添加“隐形”tr或td来影响元素的布局，你都会感觉很脏。

另一个可能对您有用的选项是将#go padding设置为“10px”，这样按钮的每边都有10px的填充。使用padding-top = 10px将使按钮看起来很有趣，b / c将按下Go一词。

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

Answer 2

这取决于你想要的10个像素。如果您只想将'go'字词移开，padding-top将起作用：http://jsfiddle.net/4G6a5/
或者你想要那里的空白？额外的10px高行或带边距的嵌套元素将起作用，具体取决于您希望边框的外观。

Answer 3

你试过padding-top吗？

Answer 4

尝试

padding-top:10px;

样式表：如何为一个单元格添加边距？

4 个答案: