Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная прокрутка <tbody> и фиксация <thead>, only CSS / 25 сообщений из 25, страница 1 из 1
09.10.2013, 14:04
    #38421538
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Привет всем !!
Ребят, помогите пожалуйста.
Есть стандартная таблица HTML в которой есть <thead> и <tbody> соответственно:


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

Код: 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:13
    #38421555
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
css fixed table header
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2013, 15:43
    #38421731
Denis1991
Denis1991
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Код: css
1.
2.
3.
thead { 
    position: fixed;
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2013, 15:44
    #38421735
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Ага, спасибо ребят, все, разобрался!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2013, 15:55
    #38421755
Denis1991
Denis1991
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Тогда пожалуйста скиньте решение с другого форума и сюда. Может кому понадобится.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.10.2013, 16:09
    #38421772
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
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:10
    #38421773
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
В див с классом withScroll таблицу только оберните.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.10.2013, 11:05
    #38422571
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Сергей ЛаловБез проблем, решение ка обычно оказалось проще и короче:
Код: 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:18
    #38422610
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
krvsa,
Спасибо! Какие предложения более универсальные есть с вашей стороны?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.10.2013, 11:56
    #38422684
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
я давно этой темой заморачивалась, все костыли :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.10.2013, 12:17
    #38422716
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Zoria,

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

насколько я помню в итоге яваскриптом меняла ширину колонок. но тогда и Ie6 был более чем актуален и Jquery не распрастранен :)
krvsaБез точного указания размеров ячеек всякие там "прокрутки тела" таблицы на ЦСС не работают так, как надо...
поэтому именно такое впечатление и осталось.
если наконец-то вам удастся найти "людской" способ.. делитесь :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.10.2013, 12:21
    #38422722
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
ZoriaраспрОстранен :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
10.10.2013, 13:15
    #38422855
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Сергей ЛаловКакие предложения более универсальные есть с вашей стороны?
Вот ответ.
Zoriaвсе костыли :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 13:16
    #38424373
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
мдааа, все таки поведенческие реакции грида лучше настраивать через JS, гибше получаццо. Гибше и непонятно как ,пока что.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 13:54
    #38424447
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Сергей Лалов... настраивать через JS ... непонятно как ,пока что.
Все упирается в ширину колонок.
При "разделении" thead и tbody размеры колонок в них "живут своей жизнью"... Т.о. есть варинты
1. Задавать размеры где-то "сверху"
2. Брать за основу размеры шапки
3. Брать за основу размеры тела
4. Всяческие комбинации пунктов 1-3
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 14:02
    #38424458
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
наверное, самое простое сделать ширину колонок фиксированной, текст поместитб в блоки и показывать overflow-scroll или hidden, по наведению мышки можно просто показывать весь текст..
если количество колонок их тип и названия известны, задача сильно упрощается.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 14:03
    #38424461
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
например, в том же "codes" зачем столько пустого места попусту тратить :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 14:48
    #38424517
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
У меня складывается такое ощущение что вообще из дивов таблицу выложить проще, обкусывая по количеству полей и переходя на новую строку))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 15:01
    #38424548
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Сергей ЛаловУ меня складывается такое ощущение что вообще из дивов таблицу выложить проще, обкусывая по количеству полей и переходя на новую строку))
Тут бы подробнее про "обкусывание"... Может эта технология действительно настоящий прорыв в этой проблеме!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.10.2013, 16:32
    #38424676
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
Вот небольшой шаблон, который работает в современных браузерах, а также в 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:39
    #38424688
Сергей Лалов
Сергей Лалов
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only CSS
user89,

Ну видите, вам же все равно приходится задавать ширину для каждого столбца.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.10.2013, 16:04
    #38425715
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вертикальная прокрутка <tbody> и фиксация <thead>, only 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.
<!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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная прокрутка <tbody> и фиксация <thead>, only CSS / 25 сообщений из 25, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 483ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447793]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 158ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 243ms
total:  483ms
x
x
Закрыть


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