Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css, padding between TR TH and TR TD / 5 сообщений из 5, страница 1 из 1
10.03.2015, 00:08
    #38899251
White Owl
White Owl
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css, padding between TR TH and TR TD
Есть таблица, визуально разделенная на сегменты. Каждый сегмент выделен через строку <TH>.
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<html>
<head>
<style>
TH {
	background-color: #eeeeee;
	border: 1px solid grey;
	vertical-align: middle;
	font-weight: bold;
	color: black;
	font-size: 14px;
}
</style>
</head>
<body>
<table>
<tr><th colspan=2>section 1</th></tr>
<tr><td>data1</td><td>abcd</td></tr>
<tr><td>data2</td><td>efgh</td></tr>
<tr><th colspan=2>section 2</th></tr>
<tr><td>data3</td><td>ijkl</td></tr>
<tr><td>data4</td><td>mnop</td></tr>
<tr><td>data5</td><td>qrst</td></tr>
<tr><td>data6</td><td>uwyx</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><th colspan=2>section 3</th></tr>
<tr><td>data7</td><td>yzab</td></tr>
</table>


Хочется, чтобы заголовок сегмента был отодвинут от предыдущего блока данных. Можно этого добиться через вставку строки "<tr><td> </td></tr>", как я сделал перед третей секцией в примере. Но хочется сделать это через CSS. Спрашивается: "как"?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.03.2015, 10:16
    #38899493
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css, padding between TR TH and TR TD
White Owl,

можно еще с тенью поиграться... Вот, навскидку
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
<!DOCTYPE html>
<html>
<head>
<style>
TH {
	background:#000;
	font-size:14px;
	padding-top:15px;
box-shadow:
	inset 0 0 100px #fff, inset 0px 1px 0px #fff, inset 0px 2px 0px #fff, inset 0px 3px 0px #fff, inset 0px 4px 0px #fff, inset 0px 5px 0px #fff,
	inset 0px 6px 0px #fff, inset 0px 7px 0px #fff, inset 0px 8px 0px #fff, inset 0px 9px 0px #fff, inset 0px 10px 0px #fff, inset 0px 11px 0px #fff,
	inset 0px 11px 0px #fff, inset 0px 12px 0px #fff, inset 0px 13px 0px #fff, inset 0px 14px 0px #fff, inset 0px 15px 0px #fff;
}
</style>
</head>
<body>
<table>
<tr><th colspan=2>section 1</th></tr>
<tr><td>data1</td><td>abcd</td></tr>
<tr><td>data2</td><td>efgh</td></tr>
<tr><th colspan=2>section 2</th></tr>
<tr><td>data3</td><td>ijkl</td></tr>
<tr><td>data4</td><td>mnop</td></tr>
<tr><td>data5</td><td>qrst</td></tr>
<tr><td>data6</td><td>uwyx</td></tr>
<tr><th colspan=2>section 3</th></tr>
<tr><td>data7</td><td>yzab</td></tr>
</table>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.03.2015, 17:55
    #38901668
White Owl
White Owl
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css, padding between TR TH and TR TD
увы, это не сработало на FF. Оно осветлило фон TH ячеек до полностью белого (на взгляд), но не повлияло на расстояние между строками.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.03.2015, 22:29
    #38901908
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css, padding between TR TH and TR TD
White Owl,

а этот скрин как раз из FF
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2015, 01:42
    #38901946
White Owl
White Owl
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
css, padding between TR TH and TR TD
user89White Owl,

а этот скрин как раз из FF А у меня FF-36.

Попробовал сделать через "border-top: outset 20px white". Визуально отодвинуть получилось, но пропала верхняя граница, а боковые вытянулись вверх на заказанные 20 пикселей.
Обидно, досадно, но ладно. Буду значить просто генерировать лишнюю строку с пустыми ячейками. Это точно будет работать и во всех браузерах..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css, padding between TR TH and TR TD / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 312ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446192]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 30ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 34ms
get tp. blocked users:
 1ms
others: 208ms
total:  312ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]