ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css, padding between TR TH and TR TD
5 сообщений из 5, страница 1 из 1
css, padding between TR TH and TR TD
    #38899251
White Owl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
White Owl
Участник
Есть таблица, визуально разделенная на сегменты. Каждый сегмент выделен через строку <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, 00:08
| Ответить | Цитировать | Написать  
css, padding between TR TH and TR TD
    #38899493
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
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
10.03.2015, 10:16
| Ответить | Цитировать | Написать  
css, padding between TR TH and TR TD
    #38901668
White Owl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
White Owl
Участник
увы, это не сработало на FF. Оно осветлило фон TH ячеек до полностью белого (на взгляд), но не повлияло на расстояние между строками.
...
Рейтинг: 0 / 0
11.03.2015, 17:55
| Ответить | Цитировать | Написать  
css, padding between TR TH and TR TD
    #38901908
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
White Owl,

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

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

Попробовал сделать через "border-top: outset 20px white". Визуально отодвинуть получилось, но пропала верхняя граница, а боковые вытянулись вверх на заказанные 20 пикселей.
Обидно, досадно, но ладно. Буду значить просто генерировать лишнюю строку с пустыми ячейками. Это точно будет работать и во всех браузерах..
...
Рейтинг: 0 / 0
12.03.2015, 01:42
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css, padding between TR TH and TR TD
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38901908&tid=1446192]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 55ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 60ms
get tp. blocked users:
 2ms
others: 211ms
total:  380ms
созд. / загр.: 380ms
x
x
Закрыть


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