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

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

10.11.2012, 10:02. Показов 29667. Ответов 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,529
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
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru