Таблица CSS и HTML - проблема с интервалом/заполнением/границей (не знаю, какая)

Я новичок в этом, и я пытался найти сообщение, которое отвечает на него, но каждое найденное мной предложение, похоже, не имеет никакого эффекта.

В основном у меня есть таблица в HTML - 2 строки, первая строка имеет только одну ячейку (заголовок), а вторая строка имеет 3 ячейки. Я хочу, чтобы была тонкая граница, разделяющая три ячейки в строке 2

Заголовок

1 | 2 | 3

Как это. Я в основном получил это, но 2 находится на одном уровне с линией слева, и я хочу, чтобы там был какой-то интервал.

Я пробовал:

cellspacing:10px (в теге td)
border-right-padding:10px
border-spacing:10px

Кажется, нет того, кого я хочу...

Я вручную измерил ширину ячеек, верхняя — 600 пикселей, три нижних — по 200 пикселей каждая.

Любые идеи?


html padding css css-tables spacing
person user2536206    schedule 30.06.2013    source источник
comment
Не могли бы вы настроить jsfiddle с существующим кодом?   -  person sinisake    schedule 30.06.2013
comment
Почему вы (весьма вероятно) используете таблицу для макета, а не display: table и table-cell в CSS?   -  person FelipeAls    schedule 30.06.2013

Ответы (2)


arrow_upward
1
arrow_downward

вы можете использовать селектор, чтобы выбрать выравнивание текста и нарисовать границы td. http://jsfiddle.net/A85rn/

tr td {text-align:center;border-left:solid;border-right:solid;width:2em;}
tr td:first-of-type {text-align:left;border:none}
tr td:last-of-type {text-align:right;border:none;}
person G-Cyrillus    schedule 30.06.2013

arrow_upward
0
arrow_downward

Я предполагаю разметку как

<table class=foo>
    <tr><th colspan=3>Heading
    <tr><td>1<td>2<td>3
</table>

Чтобы установить границы, вы можете установить правую границу для первых двух элементов td. Чтобы установить расстояние между границами и содержимым ячейки, установите горизонтальный отступ для элементов td; кажется естественным установить как левое, так и правое заполнение (симметрично), но вы можете настроить это по своему желанию. Пример таблицы стилей:

.foo td { 
    padding: 0 0.3em;
    border-right: solid 1px;
}
.foo td:last-child {
    border-right: none;
}

jsfiddle

person Jukka K. Korpela    schedule 30.06.2013