Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.68/152: Рейтинг темы: голосов - 152, средняя оценка - 4.68
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296

Закрепить строку и столбец в таблице на странице

10.11.2012, 10:02. Показов 29798. Ответов 52

Студворк — интернет-сервис помощи студентам
Не знал куда написать, если с разделом ошибся просьба перенести тему!

В Excel-е есть возможность закрепить строку или столбец, а можно и то и другое одновременно. Возможно ли применить то же самое с таблицей созданная на странице?
Если да то как?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
10.11.2012, 10:02
Ответы с готовыми решениями:

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

Ленточная форма закрепить столбец
Добрый день, подскажите есть ли возможность закрепить столбец в ленточной форме как в Excell. Вариант купить шире монитор неприемлем)).

Как правильно закрепить меню на странице
Скажите пожалуйста, а как правильно закрепить меню что бы оно не болталось при добавлении текста на страницу ?

52
20 / 20 / 2
Регистрация: 01.11.2012
Сообщений: 66
10.11.2012, 14:23
Верхнюю строку закрепить можно, напрмер так: http://www.imaputz.com/cssStuf... rsion.html
Вот столбец, на сколько я понимаю нельзя, если все делать в пределах одной таблицы.
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
13.11.2012, 20:35  [ТС]
Да, но я там кода не увидел!
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,531
13.11.2012, 21:15
Цитата Сообщение от cibin Посмотреть сообщение
Да, но я там кода не увидел!
сохрани страницу, там все внутри html.

Цитата Сообщение от cibin Посмотреть сообщение
В Excel-е есть возможность закрепить строку или столбец
Не знаю экселя, на пальцах объясни как оно выглядит.
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
13.11.2012, 22:17  [ТС]
Ну это так же и в ссылки, но по вертикале, т.е. столбцы остаются на месте, а вся таблица не считая этих столбцов двигается! К стати возможно ли это сделать если учитывать что таблицу формирует php-скрипт!?
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 01:13  [ТС]
Видать это не возможно!
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2012, 08:51
cibin, средствами только HTML+CSS - да, невозможно

а вот javascript'ом - без особых проблем

только сначала надо чётко поставить задачу - что именно и как именно надо фиксировать
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 11:09  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
cibin, средствами только HTML+CSS - да, невозможно

а вот javascript'ом - без особых проблем

только сначала надо чётко поставить задачу - что именно и как именно надо фиксировать

Фиксировать шапку
Фиксировать с левой стороны несколько столбцов, таблиц несколько и количество столбцов у всех разное.
Добавлю таблицы формируются php скриптом! Таблица очень большая и длинная формируется, для удобства хотел создать эффект закрепление на подобии Excel-а.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2012, 11:30
не, вы реально не понимаете

в Exele есть специальный интерфейс - меню "Окно", в нем пункт "Закрепить", после этого вы выделяете с помощью существующих разметочных линеек столбцов и строк нужную вам область единственной таблицы и она фиксируется

я же вас спросил - как именно вы представляете себе фиксацию на вашей HTML-странице, где НИКАКОГО специального интерфейса НЕТ, да ещё и таблиц у вас - не одна, как в Экселе, а несколько?
никаких "разметочных линеек" на странице у вас нет...

так КАК ИМЕННО?
опишите процесс - как вы себе это представляете?
конкретно опишите, по пунктам - куда чего ткнуть надо, где чего выделить...
а то, блин, как в сказке про "Федота-стрельца" - "иди туда, не знаю куда и сделай то, не знаю что"
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 11:40  [ТС]
Каждая таблица строится в отдельной странице.
Нужно что бы закреплялся одновременно как шапка таблицы так и столбец (как минимум 3 столбца).
Допустим столбцов 15 из них первые 3 это функциональные кнопки, нужно что бы была возможность двигать как по горизонтально так и вертикально и при этом шапка в месте с 3-мя первыми столбцами оставались на месте.

Стараюсь объяснять понятно!
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2012, 11:46
опять не понимаете

пусть таблица на странице ОДНА

фиксировать надо СРАЗУ, АВТОМАТИЧЕСКИ при загрузке страницы?
или же надо дать возможность юзеру самому выбрать область для фиксации после того, как страница загрузилась?
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 12:13  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
опять не понимаете

пусть таблица на странице ОДНА

фиксировать надо СРАЗУ, АВТОМАТИЧЕСКИ при загрузке страницы?
или же надо дать возможность юзеру самому выбрать область для фиксации после того, как страница загрузилась?
так бы и спросили! нужно что бы по любому был закреплён, ни каких выборов для юзера!
Т.е. так что бы я указал закрепить то то то! В коде! Страница будет загружаться уже закреплённый!


P.S. Спасибо за Ваши отклики и терпение!
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2012, 12:32
тогда ещё один вопрос - уточняющий и, надеюсь, последний

в Exele мы имеем только таблицу + интерфейс для её обработки
а на вашей странице ведь явно что-то ещё будет, кроме таблицы, так ведь?
например - выше таблицы заголовок какой-то будет, какие-нить ссылки, менюшки и т.д.
что-то может быть и ниже таблицы...

фиксация нужна, имхо, для того, чтобы ВСЮ таблицу вписать в текущие размеры окна и чтобы "крутить" таблицу надо было не скроллбарами окна, а "собственными" скроллбарами, так?

отсюда вопрос: подгонка размеров - автоматическая (вписываем всю таблицу в текущий размер окна, т.е. видно будет только таблицу, а чтобы увидеть заголовок и футер, надо будет крутить скроллбар окна) или же принудительная - т.е. вы хотите видеть всю таблицу, плюс, например, заголовок её и плюс что-то, что ниже таблицы будет (и скроллбаров у окна вовсе не будет)?
0
20 / 20 / 2
Регистрация: 01.11.2012
Сообщений: 66
03.12.2012, 13:38
Если можно использовать яваскрипт, то вот такая вот штука есть, например: http://fixedheadertable.com/

Если не устроит, поищите в гугле "html fixed columns rows" - там есть куча разных решений.
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 13:47  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
тогда ещё один вопрос - уточняющий и, надеюсь, последний

в Exele мы имеем только таблицу + интерфейс для её обработки
а на вашей странице ведь явно что-то ещё будет, кроме таблицы, так ведь?
например - выше таблицы заголовок какой-то будет, какие-нить ссылки, менюшки и т.д.
что-то может быть и ниже таблицы...

фиксация нужна, имхо, для того, чтобы ВСЮ таблицу вписать в текущие размеры окна и чтобы "крутить" таблицу надо было не скроллбарами окна, а "собственными" скроллбарами, так?

отсюда вопрос: подгонка размеров - автоматическая (вписываем всю таблицу в текущий размер окна, т.е. видно будет только таблицу, а чтобы увидеть заголовок и футер, надо будет крутить скроллбар окна) или же принудительная - т.е. вы хотите видеть всю таблицу, плюс, например, заголовок её и плюс что-то, что ниже таблицы будет (и скроллбаров у окна вовсе не будет)?
Если честно используя стили можно было бы впихнуть таблицу по горизонтале в экран монитора, но оказалось что шрифт при этом слишком маленький получается! По вертикале по любому не поместится ибо таблицы очень большие будут формироваться! Так что решил подгонки под экран монитора не делать! К стати именно из-за этого и решил закрепить области таблицы.

Добавлено через 39 секунд
Цитата Сообщение от zergi2 Посмотреть сообщение
Если можно использовать яваскрипт, то вот такая вот штука есть, например: http://fixedheadertable.com/

Если не устроит, поищите в гугле "html fixed columns rows" - там есть куча разных решений.
практически Да! Переведу почитаю!
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
03.12.2012, 14:00
опять вы не поняли

подгонка - она не в смысле уменьшения шрифта... всё останется как есть, просто добавится скроллбар, двигая который можно будет увидеть нефиксированные столбцы и строки...

я про "общий размер" спрашивал - делать его по высоте на ВСЁ окно или меньше?

вот по той ссылке, что вам дали - результирующая демонстрационная Table - она вписана в контейнер, который:
а) находится по центру страницы
б) составляет ~70% от ширины окна браузера
в) и где-то ~80% от высоты окна

тяжело с вами - въезжаете очень медленно
0
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
03.12.2012, 14:15  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
тяжело с вами - въезжаете очень медленно


Добавлено через 5 минут
Цитата Сообщение от kalabuni Посмотреть сообщение
подгонка - она не в смысле уменьшения шрифта... всё останется как есть, просто добавится скроллбар, двигая который можно будет увидеть нефиксированные столбцы и строки...

я про "общий размер" спрашивал - делать его по высоте на ВСЁ окно или меньше?

вот по той ссылке, что вам дали - результирующая демонстрационная Table - она вписана в контейнер, который:
а) находится по центру страницы
б) составляет ~70% от ширины окна браузера
в) и где-то ~80% от высоты окна
таблица на самом деле выходит за рамки границы экрана, с скроллбалом будет замечательно.
Я у себя применил фрейм и поэтому специально сделал так что бы таблица могла занимать всю страницу как по высоте так и по горизонталь. Т.е. всё сделано так что бы там была только таблица и ни чего личного, поэтому в рамку не за чем вставлять!
У меня не сайт для хостинга, больше ПО чем сайт!


Надеюсь я теперь Вас правильно понял!
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
04.12.2012, 16:01
см. демо -- http://codecenter.awardspace.com/fixtable.html
-------

чтобы сделать так как вам нужно (цитирую) -- "что бы по любому был закреплён, ни каких выборов для юзера!",
читайте "Инструкцию" ниже

Инструкция

JavaScript
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
function funcFixTable ()
{
if (document.readyState != 'complete') {TMR = setTimeout (funcFixTable, 10); return}
if (self.TMR) clearTimeout (TMR);
 
var doc = document,
    tbl = doc.getElementsByTagName ('TABLE') [0],
    fCs = tbl.getAttribute ('colsfix'),
    fRs = tbl.getAttribute ('rowsfix');
 
if (!fCs && !fRs) return; 
 
var bod = doc.body,
    tCL = tbl.cloneNode (1);
with (tCL.style)
   position = 'relative',
   visibility = 'visible';
bod.scrollTop = bod.scrollLeft = 0;
 
var t = l = 0; while (tbl.offsetParent)
   l += tbl.offsetLeft, t += tbl.offsetTop, tbl = tbl.offsetParent;
 
with (tCL)
   style.margin = t + 'px ' + l + 'px',
   removeAttribute ('rowsfix'),
   removeAttribute ('colsfix'); 
 
with (bod.style) overflow = 'hidden', margin = padding = 0;
 
with (bod)
   {
   var bcH = clientHeight,
       bcW = clientWidth; 
   removeChild (doc.getElementsByTagName ('TABLE') [0]);
   }
 
var div = doc.createElement ('DIV');
var mcs  = 'position: relative; background-color: white; overflow: scroll; width: ';
    mcs += bcW + 'px; height: ' + bcH + 'px; top: 0; left: 0; z-index: 233';
div.style.cssText = mcs;
 
var nTB = div.appendChild (tCL),
    sDV = bod.appendChild (div),
    dcW = sDV.clientWidth,
    dcH = sDV.clientHeight;
 
if (fRs) 
   {
   var h = 0, obj = nTB.rows [fRs];
   while (obj != nTB.offsetParent) h += obj.offsetTop, obj = obj.offsetParent;
 
   var div = doc.createElement ('DIV'),
       mcs  = 'background-color: white; position: absolute; top: 0; left: 0; ';
       mcs += 'overflow: hidden; width: ' + dcW + 'px; height: ' + h + 'px; z-index: 234';
   div.style.cssText = mcs; div.id = 'mROW'; sDV.ddddd = 1;
 
   var z = nTB.cloneNode (1); z.style.marginTop = t + 'px';
   div.appendChild (z);
   bod.appendChild (div);
   }
 
if (fCs) 
   {
   var w = 0, obj = nTB.rows [0].cells [fCs];
   while (obj != nTB.offsetParent) w += obj.offsetLeft, obj = obj.offsetParent;
   var div = doc.createElement ('DIV'),
       mcs  = 'background-color: white; position: absolute; top: 0; left: 0; ';
       mcs += 'overflow: hidden; width: ' + w + 'px; height: ' + dcH + 'px; z-index: 234';
   div.style.cssText = mcs; div.id = 'mCOL'; sDV.ddddd = (sDV.ddddd) ? 3 : 2;
 
   var z = nTB.cloneNode (1); z.style.marginTop = t + 'px';
   div.appendChild (z);
   bod.appendChild (div);
   }
 
if (fCs && fRs)
   {
   var div = doc.createElement ('DIV'),
       mcs  = 'background-color: white; position: absolute; top: 0; left: 0; ';
       mcs += 'overflow: hidden; width: ' + w + 'px; height: ' + h + 'px; z-index: 235';
   div.style.cssText = mcs;
   var z = nTB.cloneNode (1); z.style.marginTop = t + 'px';
   div.appendChild (z);
   bod.appendChild (div);
   }
 
sDV.onscroll = function ()
   {
   if (sDV.ddddd % 2)
      {
      var obj1 = document.getElementById ('mROW').getElementsByTagName ('TABLE') [0];
      obj1.style.left = -this.scrollLeft + 'px';
      }
   if (sDV.ddddd > 1)
      {
      var obj2 = document.getElementById ('mCOL').getElementsByTagName ('TABLE') [0];
      obj2.style.top = -this.scrollTop + 'px';
      }
   }
}
1) этот код сохраняете как файл с именем, например, myscript.js и подключаете его к своей странице
между тегами <head> и </head> инструкцией <script src="myscript.js"></script>

2) в теге <table> прописываете нужные вам атрибуты (либо любой один, либо оба):
-- количество фиксируемых строк ROWSFIX
-- количество фиксируемых столбцов COLSFIX
кроме этого, можно указать в стилях невидимость (а можно и не указывать)

в итоге это будет выглядеть, например, так:
<table rowsfix="3" colsfix="1" style="visibility: hidden" ...>

3) "раскрашиванием" фиксируемых столбцов/строк (если нужно) озаботьтесь сами в HTML-коде

4) скрипт "заточен" для обговорённого вами случая, когда на странице только таблица и ничего более
3
6 / 3 / 0
Регистрация: 09.01.2012
Сообщений: 296
04.12.2012, 16:05  [ТС]
Цитата Сообщение от kalabuni Посмотреть сообщение
см. демо ...
ОГРОМНОЕ ЧЕЛОВЕЧЕСКОЕ СПАСИБО!!! ЩАС ПОПРОБУЮ.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
05.12.2012, 07:01
гм...
одну строчку в коде я почему-то забыл
самую последнюю и самую главную - запуск этой самой функции

в общем, добавьте в самый низ кода (после самой последней фигурной скобки) ещё одну строку
JavaScript
1
funcFixTable ();
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.12.2012, 07:01
Помогаю со студенческими работами здесь

Как закрепить горизонтально 5 записей на главной странице?
Нужно под шапкой расположить блок с 5ю записями выбранными автором.Какие есть способы, а лучше плагины.Заранее спасибо.

Не могу закрепить текстовый слой к странице и уменьшить расстояние между строк
Народ хелп! Работаю в dreamweaver. Сделал второй слой с текстом, который в программе позиционируется как надо (в css), а при экспорте...

Как закрепить строку в HTML?
Доброго времени суток! Хотела бы попросить у профессионалов помощи, у меня есть таблица в HTML (она большая), есть заголовки таблицы,...

Закрепить верхнюю строку в Excel
Здравствуйте! Как закрепиь верхнюю строку в Excel?

Как зафиксировать область просмотра колонок(1c7.7), т.е. как закрепить столбец у справочника...
Добрый день. Помогите пожалуйста, как можно зафиксировать область просмотра, например, у справочника контрагентов, чтобы при просмотре ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru