ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
25 сообщений из 25, страница 1 из 1
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421538
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
Привет всем !!
Ребят, помогите пожалуйста.
Есть стандартная таблица HTML в которой есть <thead> и <tbody> соответственно:


Подскажите пожалуйста, как грамотно по феншую организовать фиксацию шапки <thead>, c нормальной прокруткой
тела таблицы <tbody> по вертикали?
У меня почему то сбилось позиционирование заголовков <th> в шапке <thead>, они не такой же ширины как <td> в теле
<tbody>.
Подскажите пожалуйста решение с позиции CSS. Чтобы заголовок таблицы был зафиксирован, а тело таблицы имело нормальный скролинг, и поля были в шапке и теле одинаковой ширины.
...
Рейтинг: 0 / 0
09.10.2013, 14:04
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421552
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
Или помогите подправить мой говнокод , что то где то не дожал:

Код: 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.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
table,tr,td,th
{
 border:1px solid black; 
 border-color:green;

}
table
{
font-size:8pt;
font-style:colibri; 
 width:900px;
 border-collapse:collapse;
}
td
{
max-width:5cm;
width:5cm;
/*overflow:hidden;*/
border-collapse:collapse;
}
th
{
background-color:'yellow';
width:5cm;
border-collapse:collapse;
}

tr
{
border-collapse:collapse;
}






caption
{
background-color:'green';
border:1px solid black;
font-size:12pt;
font-align:center;
font-style:colibri; 
font-weight:bold;
cursor:move;
}
tbody
{
overflow-y: scroll;
max-height:250px;
display:block;
}
thead
{
overflow-y: scroll;
max-height:250px;
display:block;
}
...
Рейтинг: 0 / 0
09.10.2013, 14:12
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421555
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
css fixed table header
...
Рейтинг: 0 / 0
09.10.2013, 14:13
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421731
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Код: css
1.
2.
3.
thead { 
    position: fixed;
}
...
Рейтинг: 0 / 0
09.10.2013, 15:43
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421735
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
Ага, спасибо ребят, все, разобрался!
...
Рейтинг: 0 / 0
09.10.2013, 15:44
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421755
Denis1991
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Denis1991
Участник
Тогда пожалуйста скиньте решение с другого форума и сюда. Может кому понадобится.
...
Рейтинг: 0 / 0
09.10.2013, 15:55
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421772
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
Denis1991,

Без проблем, решение ка обычно оказалось проще и короче:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
<style type="text/css">
table { font: 8pt Arial; border-collapse: collapse; }
table td { border: 1px solid #acacac; padding: 5px 25px; text-align: center; width: 80px; }
 
.withScroll table thead, .withScroll table tbody { display: block; } 
.withScroll table tbody { height: 100px; overflow: auto; margin-top: -1px; }
.withScroll table thead td:last-child { width: 80px; }
</style>
...
Рейтинг: 0 / 0
09.10.2013, 16:09
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38421773
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
В див с классом withScroll таблицу только оберните.
...
Рейтинг: 0 / 0
09.10.2013, 16:10
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422571
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сергей ЛаловБез проблем, решение ка обычно оказалось проще и короче:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
<style type="text/css">
table { font: 8pt Arial; border-collapse: collapse; }
table td { border: 1px solid #acacac; padding: 5px 25px; text-align: center; width: 80px; }
 
.withScroll table thead, .withScroll table tbody { display: block; } 
.withScroll table tbody { height: 100px; overflow: auto; margin-top: -1px; }
.withScroll table thead td:last-child { width: 80px; }
</style>


Это частный случай...
Без точного указания размеров ячеек всякие там "прокрутки тела" таблицы на ЦСС не работают так, как надо...
...
Рейтинг: 0 / 0
10.10.2013, 11:05
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422610
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
krvsa,
Спасибо! Какие предложения более универсальные есть с вашей стороны?
...
Рейтинг: 0 / 0
10.10.2013, 11:18
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422684
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
я давно этой темой заморачивалась, все костыли :)
...
Рейтинг: 0 / 0
10.10.2013, 11:56
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422716
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
Zoria,

Да, темка интересная, в интернете много примеров. Сейчас еще поэкспериментирую с фиксацией и выложу может ченить поинтересней.
...
Рейтинг: 0 / 0
10.10.2013, 12:17
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422719
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей Лалов,

 
Мой велосипед. Уверен, можно сократить код
Код: 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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
<!DOCTYPE html>
<html>
<head>
<style>
* {
	font-family:arial,sans-serif;
	font-size:10pt;
}
.DivCont {
	border-bottom:1px solid #c0c0c0;
	height:105px;
	width:737px;
	overflow-y:auto;
	overflow-x:hidden;
}
.HeaderFix {
	font-weight:700;
	background:#E8E6E4;
}
.TableFix {
	border-collapse:collapse;
	table-layout:fixed;
	width:700px;
}
.c1 {width:100px;}
.c2 {width:150px;}
.c3 {width:200px;}
.c4 {width:250px;}
td {
	border:1px solid #c0c0c0;
	border-bottom:0;
	padding:2px 4px 2px 4px;
}
</style>
</head>

<body>
Таблица с прокручиваемым заголовком<br><br>
<table class="TableFix">
	<tr class="HeaderFix"><td class="c1">Ширина 100px</td><td class="c2">Ширина 150px</td><td class="c3">Ширина 200px</td><td class="c4">Ширина 250px</td></tr>
</table>
<div class="DivCont">
<table class="TableFix">
	<tr><td class="c1">1 строка</td><td class="c2">12345</td><td class="c3">12345</td><td class="c4">12345</td></tr>
	<tr><td>2 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
	<tr><td>3 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
	<tr><td>4 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
	<tr><td>5 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
	<tr><td>6 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
	<tr><td>7 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>	
</table>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
10.10.2013, 12:19
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422721
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Сергей Лалов,

насколько я помню в итоге яваскриптом меняла ширину колонок. но тогда и Ie6 был более чем актуален и Jquery не распрастранен :)
krvsaБез точного указания размеров ячеек всякие там "прокрутки тела" таблицы на ЦСС не работают так, как надо...
поэтому именно такое впечатление и осталось.
если наконец-то вам удастся найти "людской" способ.. делитесь :)
...
Рейтинг: 0 / 0
10.10.2013, 12:21
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422722
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
ZoriaраспрОстранен :)
...
Рейтинг: 0 / 0
10.10.2013, 12:21
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38422855
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сергей ЛаловКакие предложения более универсальные есть с вашей стороны?
Вот ответ.
Zoriaвсе костыли :)
...
Рейтинг: 0 / 0
10.10.2013, 13:15
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424373
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
мдааа, все таки поведенческие реакции грида лучше настраивать через JS, гибше получаццо. Гибше и непонятно как ,пока что.
...
Рейтинг: 0 / 0
11.10.2013, 13:16
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424447
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сергей Лалов... настраивать через JS ... непонятно как ,пока что.
Все упирается в ширину колонок.
При "разделении" thead и tbody размеры колонок в них "живут своей жизнью"... Т.о. есть варинты
1. Задавать размеры где-то "сверху"
2. Брать за основу размеры шапки
3. Брать за основу размеры тела
4. Всяческие комбинации пунктов 1-3
...
Рейтинг: 0 / 0
11.10.2013, 13:54
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424458
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
наверное, самое простое сделать ширину колонок фиксированной, текст поместитб в блоки и показывать overflow-scroll или hidden, по наведению мышки можно просто показывать весь текст..
если количество колонок их тип и названия известны, задача сильно упрощается.
...
Рейтинг: 0 / 0
11.10.2013, 14:02
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424461
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
например, в том же "codes" зачем столько пустого места попусту тратить :)
...
Рейтинг: 0 / 0
11.10.2013, 14:03
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424517
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
У меня складывается такое ощущение что вообще из дивов таблицу выложить проще, обкусывая по количеству полей и переходя на новую строку))
...
Рейтинг: 0 / 0
11.10.2013, 14:48
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424548
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сергей ЛаловУ меня складывается такое ощущение что вообще из дивов таблицу выложить проще, обкусывая по количеству полей и переходя на новую строку))
Тут бы подробнее про "обкусывание"... Может эта технология действительно настоящий прорыв в этой проблеме!
...
Рейтинг: 0 / 0
11.10.2013, 15:01
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424676
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Вот небольшой шаблон, который работает в современных браузерах, а также в IE8. При желании в DivHeader можно сделать градиент.
 
Только HTML + CSS
Код: 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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
<!DOCTYPE html>
<html>
<head>
<style>
* {
	font-family:arial,sans-serif;
	font-size:10pt;
}
.GlobalTableDiv {
	width:735px;
	margin-top:3px;
	border:1px solid #c5c5c5;
}
.DivHeader {
	background:#f1f1f1;
	width:100%;
	border-bottom:1px solid #c0c0c0;
}
.DivCont {
	height:104px;
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
}
.TableFix {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
.TableFix td, .TableFix th {
	padding:2px 4px;
	border-left:1px solid #c5c5c5;
	border-bottom:1px solid #EDEDED;
}
.TableFix th {border-bottom:0;}
.TableFix td:first-child, .TableFix th:first-child {border-left:0;}
.c1 {width:100px;}
.c2 {width:150px;}
.c3 {width:200px;}
.c4 {width:250px;}
</style>
</head>

<body>
Таблица с небольшим количеством строк
<div class="GlobalTableDiv">
	<div class="DivHeader">
		<table class="TableFix">
			<tr><th class="c1">Заголовок 1</th><th class="c2">Заголовок 2</th><th class="c3">Заголовок 3</th><th class="c4">Заголовок 4</th></tr>
		</table>
	</div>
	<div class="DivCont">
		<table class="TableFix">
			<tr><td class="c1">1 строка</td><td class="c2">12345</td><td class="c3">12345</td><td class="c4">12345</td></tr>
			<tr><td>2 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>3 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
		</table>
	</div>
</div> <!-- class="GlobalTableDiv" -->
<br><br>
Таблица, где много строк
<div class="GlobalTableDiv">
	<div class="DivHeader">
		<table class="TableFix">
			<tr><th class="c1">Заголовок 1</th><th class="c2">Заголовок 2</th><th class="c3">Заголовок 3</th><th class="c4">Заголовок 4</th></tr>
		</table>
	</div>
	<div class="DivCont">
		<table class="TableFix">
			<tr><td class="c1">1 строка</td><td class="c2">12345</td><td class="c3">12345</td><td class="c4">12345</td></tr>
			<tr><td>2 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>3 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>4 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>5 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>6 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>7 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>	
		</table>
	</div>
</div> <!-- class="GlobalTableDiv" -->
</body>
</html>


 
Недостаток
Если горизонтальная линия будет поярче, то при скроллинге в самый низ, будет двойная линия у последней строки.
Возможные варианты:
- сделать горизонтальную линию очень бледной (в моем решении выше)
- если много строк, то на сервере присваивать последней строке класс с border-bottom:0;
- если много строк, через JavaScript присваивать последней строке класс с border-bottom:0;

...
Рейтинг: 0 / 0
11.10.2013, 16:32
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38424688
Фотография Сергей Лалов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сергей Лалов
Участник
user89,

Ну видите, вам же все равно приходится задавать ширину для каждого столбца.
...
Рейтинг: 0 / 0
11.10.2013, 16:39
| Ответить | Цитировать | Написать  
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
    #38425715
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Сергей Лалов,

ну, в общем, да. Без них, наверное, никак.
 
Улучшенный вариант. Градиентный заголовок, а также убирается двойная линия у последней строки, если строк много
Код: 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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
<!DOCTYPE html>
<html>
<head>
<style>
* {
	font-family:arial,sans-serif;
	font-size:10pt;
}
table {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
td, th{
	padding:2px 4px;
	border-left:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
}
td:first-child, th:first-child {border-left:0;}
.DivFixTable {
	width:700px;
	margin-top:3px;
	border:1px solid #c5c5c5;
}
.gradient {
	background:-moz-linear-gradient(top, #F9F9F9, #E4E4E6);
	background:-webkit-linear-gradient(top, #F9F9F9, #E4E4E6);
	background:linear-gradient(top, #F9F9F9, #E4E4E6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#F9F9F9', EndColorStr='#E4E4E6');
	background:-ms-linear-gradient(top, #F9F9F9, #E4E4E6);
}
.Tdata {
	height:104px;
	width:100%;
	overflow-y:auto;
	overflow-x:hidden;
}
</style>
</head>

<body onload="HideLastRow('MyTable');">
Таблица с фиксированным заголовком
<div class="DivFixTable">
	<table class="gradient">
		<col width=100> <col width=150> <col width=200> <col width=250>
		<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th><th>Заголовок 4</th></tr>
	</table>
	<div class="Tdata">
		<table id="MyTable">
			<col width=100> <col width=150> <col width=200> <col width=250>
			<tr><td>1 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>2 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>3 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>4 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>5 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>6 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
			<tr><td>7 строка</td><td>12345</td><td>12345</td><td>12345</td></tr>
		</table>
	</div>
</div>
</body>

<script>
function HideLastRow (idx) {
	var i = 0;
	var el = document.getElementById(idx);
	var RowsCnt = el.rows.length;
	if (RowsCnt > 4) {
		var c = el.rows[RowsCnt-1].cells;
		var ColsCnt = c.length;
		for (i=0; i<ColsCnt; i++) {
			c[i].style.borderBottom = '0';
		}
	}
}
</script>
</html>

...
Рейтинг: 0 / 0
13.10.2013, 16:04
| Ответить | Цитировать | Написать  
25 сообщений из 25, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38424688&tid=1447793]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 178ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 74ms
get tp. blocked users:
 1ms
others: 240ms
total:  535ms
созд. / загр.: 535ms
x
x
Закрыть


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