Стилизация таблицы: как добавить поля в одну ячейку?

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 ячейка на 10 пикселей ниже текущей позиции?

Я пытался играть с 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 на «10px», чтобы у кнопки было 10px отступа с каждой стороны. При использовании только padding-top = 10px кнопка будет выглядеть забавно, b / c слово Go будет сдавлено вниз.

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

Answer 2

Вы пробовали padding-top?

Answer 3

попробуй

padding-top:10px;

Answer 4

Это зависит от того, кем вы хотите быть в этих 10 пикселях.Если вы хотите просто переместить слово «go» вниз, padding-top будет работать: http://jsfiddle.net/4G6a5/
Или вам нужно пустое место там?Будет работать дополнительный ряд или вложенный элемент высотой 10px с полем, в зависимости от того, как вы хотите, чтобы граница выглядела.