ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Горизонтальный вертикальный колонтитул fixed/absolute
15 сообщений из 15, страница 1 из 1
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603217
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
Добрый день.

Заготовка - http://jsfiddle.net/EC56J/

Задача - необходимо сделать так, чтобы горизонтальный и вертикальный колонтитулы ездили за скроллами окна. Количество строк и столбцов может различаться. К тому же количество таблиц тоже может меняться, но горизонтальный всегда одинаков, разный будет только вертикальный. Высота строк тоже может различаться после генерации страницы.

Как сделал я. Клонировал горизонтальный колонтитул в новую таблицу, сделал ее position: absolute и привязал к скроллу. У вертикального почти тоже самое, только клонировал я текст внутри ячейки и также делал position: absolute и привязка в скроллу. Все работает, но тормозит (особенно в ие), да и мне как программисту глаз режет, хоть пользователь и доволен до пузырей.

В арсенале имеется jQuery 1.7.1 и IE8.

Хотелось бы чтобы работало быстрее, и сделано более красиво с точки зрения дизайна. Не тормозит position:fixed у горизонтального колонтитула, но он по скроллится по горизонтали. Можете что-нибудь посоветовать?
...
Рейтинг: 0 / 0
02.04.2014, 16:02
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603293
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
GustlyЗаготовка - http://jsfiddle.net/EC56J/

Как сделал я. ...
Так там ничего не "скролится"...
Просто табличка и все.
...
Рейтинг: 0 / 0
02.04.2014, 16:49
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603317
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
krvsaGustlyЗаготовка - http://jsfiddle.net/EC56J/

Как сделал я. ...
Так там ничего не "скролится"...
Просто табличка и все.
Я не стал полный вариант кидать, он большой. Но если это поможет могу сделать.
...
Рейтинг: 0 / 0
02.04.2014, 17:05
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603442
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
GustlyНо если это поможет могу сделать.
Твоя проблема - тебе и решать...

Причем у тебя странное, какое-то свое понятие слова "колонтитул"... :))
Вот несколько стандартных понятий
http://slovari.yandex.ru/что такое колонтитул/Издательский словарь/Колонтитул/
http://ru.wikipedia.org/wiki/??????????
...
Рейтинг: 0 / 0
02.04.2014, 18:51
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603796
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
http://jsfiddle.net/EC56J/3/

Вот обновленный вариант. Вертикальная, пускай штука, ездит вправо за скроллом. Горизонтальная также должна себя вести и ездить вниз.
...
Рейтинг: 0 / 0
03.04.2014, 09:54
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603873
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Gustly http://jsfiddle.net/EC56J/3/

Вот обновленный вариант.
Иными словами, тебе нужна таблица с фиксированной шапкой и фиксированным первым столбцом...
...
Рейтинг: 0 / 0
03.04.2014, 10:30
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603883
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Gustly , может тут найдешь для себя ответ...
...
Рейтинг: 0 / 0
03.04.2014, 10:35
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38603941
Gustly
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Gustly
Участник
krvsa,

Проблемы в том. Что горизонтальная шапка статична по вертикали, но должна ездить по горизонтали, у меня там месяцы с днями и может быть длинной.

А вертикальная шапка статична по горизонтали, но должна ездить вверх вниз за скроллом.
...
Рейтинг: 0 / 0
03.04.2014, 11:07
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38608132
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Gustly,

тоже заинтересовался этим вопросом. Вот работающий вариант, проверял в Мозилле, IE8-9, Хромом (правда в IE8-9 при прокрутке, немного дергается заголовок)
 
Таблица. Фиксированный заголовок, столбец. Немного JavaScript.
Код: 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.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
<!DOCTYPE html>
<html>
<head>
<style>
table {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
td{
	padding:2px 3px;
	border-left:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
}
td:first-child {border-left:0;}
#DivTable1 {
	position:absolute;
	top:27px;
	left:30px;
	height:142px;
	width:550px;
	font-family:arial,sans-serif;
	font-size:9pt;
	border:1px solid #c5c5c5;
	overflow:scroll;
}
.TopLeftCell{
	position:absolute;
	top:0;
	left:0;
	height:19px;
	width:99px;
	background:#f0f0f0;
	border-right:1px solid #c5c5c5;
	border-bottom:1px solid #c5c5c5;
	z-index:4;
}
.FixCol {
	position:absolute;
	top:20px;
	left:0;
	width:99px;
	background:#f0f0f0;
	border-right:1px solid #c5c5c5;
	z-index:3;
}
.FixRow {
	position:absolute;
	top:0;
	left:100px;
	height:19px;
	background:#f0f0f0;
	border-bottom:1px solid #c5c5c5;
	font-weight:700;
	z-index:3;
}
.FixRow td {border-bottom:0;}
#DivTable1 .Content {
	position:absolute;
	left:100px;
	top:20px;
	right:0;
	z-index:2;
}
</style>
</head>

<body>
<div id="DivTable1">
	<div class="TopLeftCell"></div>
	<div class="FixCol">
		<table> <col width=100>
			<tr><td>1 строка</td></tr> <tr><td>2 строка</td></tr> <tr><td>3 строка</td></tr>
			<tr><td>4 строка</td></tr> <tr><td>5 строка</td></tr> <tr><td>6 строка</td></tr> <tr><td>7 строка</td></tr>
		</table>
	</div>
	<div class="FixRow">
		<table> <col width=150> <col width=200> <col width=230>
		<tr><td>Воспоминания</td><td> о былой</td><td>любви.</td></tr>
		</table>
	</div>
	<div class="Content">
		<table> <col width=150> <col width=200> <col width=230>
			<tr><td>Дремлет за горой</td><td>мрачный замок мой. Душу</td><td>мучает порой царящий в нем покой.</td></tr>
			<tr><td>Я своих фантазий</td><td>страждущий герой,</td><td>О любви моей былой все образы</td></tr>
			<tr><td>со мной. Я часто вижу</td><td>страх в смотрящих на меня</td><td>глазах. Им суждено уснуть в моих</td></tr>
			<tr><td>стенах, застыть в моих</td><td> мирах. Но сердце от любви</td><td>горит, моя душа болит. И восковых</td></tr>
			<tr><td>фигур прекрасен вид.</td><td>Покой везде царит. Я их</td><td>приводил в свой прекрасный дом.</td></tr>
			<tr><td>Их вином поил и</td><td>разлекались мы потом. Иногда</td><td> у них легкий был испуг от</td></tr>
			<tr><td>прикосновенья к</td><td>нежной шее крепких рук.</td><td></td></tr>
		</table>
	</div> <!-- Content -->
</div> <!-- DivTable1 -->

<script>
var DivTable1 = document.getElementById('DivTable1');
DivTable1.onscroll = function() {
	var xx = DivTable1.pageXOffset || DivTable1.scrollLeft;
	var yy = DivTable1.pageYOffset || DivTable1.scrollTop;

	FixCol = DivTable1.children[1];
	FixCol.style.left = xx + 'px';

	FixRow = DivTable1.children[2];
	FixRow.style.top = yy + 'px';

	TopLeftCell = DivTable1.children[0];
	TopLeftCell.style.top = yy + 'px';
	TopLeftCell.style.left = xx + 'px';
}
</script>

</body>
</html>


Уверен, есть решение без JavaScript, на CSS для всех браузеров. Но никак не соображу :(
html table fix header col column
...
Рейтинг: 0 / 0
08.04.2014, 11:18
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #38608385
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89Уверен, есть решение без JavaScript, на CSS для всех браузеров.
Нету...
...
Рейтинг: 0 / 0
08.04.2014, 13:21
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Горизонтальный вертикальный колонтитул fixed/absolute
    #39380214
kryuger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
kryuger
Гость
user89, спасибо за скрипт, очень пригодился.

Не подскажете, как добавить в него еще один элемент? Скажем, нужно чтобы снизу строка вела себя так же, как .FixCol, т.е. скроллилась вверх-вниз, но не скроллилась влево-враво.

Я добавил элемент <div class="FixRow2"> </div>
И попытался добавить его в скрипт, но безуспешно, т.к. с JS не знаком. Буду признателен, если поправите.

 
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
td{
padding:2px 3px;
border-left:1px solid #c5c5c5;
border-bottom:1px solid #c5c5c5;
}
td:first-child {border-left:0;}
#DivTable1 {
position:absolute;
top:27px;
left:30px;
height:142px;
width:550px;
font-family:arial,sans-serif;
font-size:9pt;
border:1px solid #c5c5c5;
overflow:scroll;
}
.TopLeftCell{
position:absolute;
top:0;
left:0;
height:19px;
width:99px;
background:#f0f0f0;
border-right:1px solid #c5c5c5;
border-bottom:1px solid #c5c5c5;
z-index:4;
}
.FixCol {
position:absolute;
top:20px;
left:0;
width:99px;
background:#f0f0f0;
border-right:1px solid #c5c5c5;
z-index:3;
}
.FixRow {
position:absolute;
top:0;
left:100px;
height:19px;
background:#f0f0f0;
border-bottom:1px solid #c5c5c5;
font-weight:700;
z-index:3;
}
.FixRow td {border-bottom:0;}
#DivTable1 .Content {
position:absolute;
left:100px;
top:20px;
right:0;
z-index:2;
}

.FixRow2 {
position:absolute;
top:153px;
left:0;
width:99px;
background:#f0f0f0;
border-right:1px solid #c5c5c5;
z-index:3;
}
</style>
</head>

<body>
<div id="DivTable1">
<div class="TopLeftCell"></div>
<div class="FixCol">
<table> <col width=100>
<tr><td>1 строка</td></tr> <tr><td>2 строка</td></tr> <tr><td>3 строка</td></tr>
<tr><td>4 строка</td></tr> <tr><td>5 строка</td></tr> <tr><td>6 строка</td></tr> <tr><td>7 строка</td></tr>
</table>
</div>
<div class="FixRow">
<table> <col width=150> <col width=200> <col width=230>
<tr><td>Воспоминания</td><td> о былой</td><td>любви.</td></tr>
</table>
</div>
<div class="Content">
<table> <col width=150> <col width=200> <col width=230>
<tr><td>Дремлет за горой</td><td>мрачный замок мой. Душу</td><td>мучает порой царящий в нем покой.</td></tr>
<tr><td>Я своих фантазий</td><td>страждущий герой,</td><td>О любви моей былой все образы</td></tr>
<tr><td>со мной. Я часто вижу</td><td>страх в смотрящих на меня</td><td>глазах. Им суждено уснуть в моих</td></tr>
<tr><td>стенах, застыть в моих</td><td> мирах. Но сердце от любви</td><td>горит, моя душа болит. И восковых</td></tr>
<tr><td>фигур прекрасен вид.</td><td>Покой везде царит. Я их</td><td>приводил в свой прекрасный дом.</td></tr>
<tr><td>Их вином поил и</td><td>разлекались мы потом. Иногда</td><td> у них легкий был испуг от</td></tr>
<tr><td>прикосновенья к</td><td>нежной шее крепких рук.</td><td></td></tr>
</table>
</div> <!-- Content -->

<div class="FixRow2">
<table> <col width=150> <col width=200> <col width=230>
<tr><td>Воспоминания</td><td> о былой</td><td>любви.</td></tr>
</table>
</div>
</div> <!-- DivTable1 -->

<script>
var DivTable1 = document.getElementById('DivTable1');
DivTable1.onscroll = function() {
var xx = DivTable1.pageXOffset || DivTable1.scrollLeft;
var yy = DivTable1.pageYOffset || DivTable1.scrollTop;

FixCol = DivTable1.children[1];
FixCol.style.left = xx + 'px';

FixRow2 = DivTable1.children[3];
FixRow2.style.left = xx + 'px';

FixRow = DivTable1.children[2];
FixRow.style.top = yy + 'px';

TopLeftCell = DivTable1.children[0];
TopLeftCell.style.top = yy + 'px';
TopLeftCell.style.left = xx + 'px';
}
</script>

</body>
</html>
...
Рейтинг: 0 / 0
07.01.2017, 00:43
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #39381409
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
kryuger,

я тут выложил более продвинутый вариант для фиксированных заголовков/столбцов 17822310

А если нужно просто зафиксировать заголовок/подвал, то можно обойтись и без JavaScript.
 
Проверено в новой Опере, Мозилле, Хромом, IE11
Код: 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.
<!DOCTYPE html>
<html>
<head>
<style>
* {font:14px arial;}
div {box-sizing:border-box;}
table {border-collapse:collapse; table-layout:fixed; width:400px; height:100%;}
td{
	padding:2px 3px;
	border-left:1px solid #c5c5c5;
	border-top:1px solid #eee;
	width:156px;
}
td:first-child {border-left:0;}
td:nth-child(n+3) {
	width:70px;
	text-align:center;
}
.cont {
	position:relative;
	width:400px;
	height:180px;
}
.header, .body, .footer {
	position:absolute;
	left:0; right:0;
	border:1px solid #c5c5c5;
	overflow:hidden;
}
.header {
	height:24px;
	background:#E2EEFF;
}
.body {
	top:24px;
	bottom:24px;
	overflow-y:auto;
	border-width:0 1px;
}
.footer {
	bottom:0;
	height:24px;
	background:#4580B1;
	color:#fff;
}
</style>
</head>

<body>
<div class="cont">
	<div class="header">
		<table> <tr> <td>Сотрудник <td>Проект <td>Часы </table>
	</div>
	<div class="body">
		<table>
			<tr> <td>Иванов <td>Проект 1 <td>100
			<tr> <td>Петров <td>Проект 2 <td>150
			<tr> <td>Сидоров <td>Проект 3 <td>200
			<tr> <td>Кузнецов <td>Проект 4 <td>168
			<tr> <td>Волков <td>Проект 4 <td>170
			<tr> <td>Алексеев <td>Проект 1 <td>190
			<tr> <td>Гришин <td>Проект 1 <td>120
			<tr> <td>Демидов <td>Проект 2 <td>154
			<tr> <td>Васильев <td>Проект 5 <td>80
			<tr> <td>Андреев <td>Проект 5 <td>120
			<tr> <td>Григорьев <td>Проект 4 <td>90
			<tr> <td>Матвеев <td>Проект 4 <td>60
		</table>
	</div> <!-- class="body" -->
	<div class="footer">
		<table> <tr> <td>&#160; <td>Итого <td>=sum </table>
	</div>
</div> <!-- class="cont" -->

</body>
</html>

...
Рейтинг: 0 / 0
10.01.2017, 13:07
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #39381426
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
user89А если нужно просто зафиксировать заголовок/подвал, то можно обойтись и без JavaScript.
Вариант с тремя таблицами не особо интересен... Там за размерами колонок самому нужно следить.
...
Рейтинг: 0 / 0
10.01.2017, 13:18
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #39381430
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
krvsa,

Зато без JS.
Вариант жизнеспособный.
Только в шапке и подвале надо делать лишнюю ячейку шириной в скролл, чтобы скролл на данные не наезжал.
...
Рейтинг: 0 / 0
10.01.2017, 13:23
| Ответить | Цитировать | Написать  
Горизонтальный вертикальный колонтитул fixed/absolute
    #39381447
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mage.lanВариант жизнеспособный.
Спору нет...
...
Рейтинг: 0 / 0
10.01.2017, 13:37
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Горизонтальный вертикальный колонтитул fixed/absolute
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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