powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица. Фиксированный заголовок, столбец.
13 сообщений из 13, страница 1 из 1
Таблица. Фиксированный заголовок, столбец.
    #38989856
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Для сводных отчетов нужно, чтобы несколько колонок слева и заголовок оставались на месте, а данные прокручивались. Находил много решений, но они использовали библиотеки типа jQuery или были сложны в реализации (не учитывалось объединение ячеек)
Мне хотелось сделать что-то универсальное и простое. Вроде получилось :)   Области фиксируются вызовом функции
Код: html
1.
FixHeaderCol(<таблица>, <сколько фиксировать строк>, <сколько фиксировать столбцов>, <ширина таблицы>, <высота таблицы>)

Успешно работает в IE10, новой Опере, Мозилле, Хроме.
Демо https://jsfiddle.net/axeqojwu/1/embedded/result/
Исходники с комментариями http://jsfiddle.net/axeqojwu/1/

З.Ы. Функция setSum в реальных проектах не нужна, она заполняет пустые ячейки случайными числами
table fix header column таблица фиксированный заголовок столбец области прокручиваемый
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38989893
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
здОрово!

невозбранно спер в закрома - скоро пригодится.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38990283
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
user89 , спасибо тебе, добрый человек.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38990395
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
user89,

...красиво, ничего не скажешь ... вот только один вопрос - при динамических данных, когда ширина колонки может меняться значительно - не ползет стиль? .. просто я пробовал разные вариантов фиксированных шапок из инета под knockout - все хорошо до определенных моментов .. пришлось самому рисовать шапку из динамических дивов с подсчетом ширины столбца на лету ...
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38990423
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
carrotik,

по идее не должно расползтись. Больше всего мучений было с IE (высота строк в левой фиксированной области). Лечится в CSS min-height:14px; (в комментариях подробнее написал). В реальности, клиентской высоты меньше 14px не будет...   А вот с шириной проблем не было нигде.
Фиксированная область - это 3 таблицы, где вычисляется высота/ширина ячеек. Хотел сначала тоже на дивах сделать, но на таблицах оказалось проще
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38990428
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Есть некоторый недостаток. Колесо мыши не скроллит таблицы. Хотя обычно overflow колесом скроллится.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38994197
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Добрался до колёсика мыши...   Демо https://jsfiddle.net/axeqojwu/2/embedded/result/
Исходники https://jsfiddle.net/axeqojwu/2/
Не знаю, будет ли колёсико мыши работать в Сафари.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38994653
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
user89 , еще раз спасибо.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #38994673
Фотография Алексей Смирнов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Да офигенно! Очень полезная вещь!
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #39137717
krvsa,

Большое спасибо, что я долго пробовал "вот так", и ничего не получалось.
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #39305872
Алекссс
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
user89, решение привязано к пикселам? без привязки не получится?
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #39306026
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Алекссс,

если надо закрепить области у резиновой таблицы, то скорее всего, подойдет такой сценарий:
- вычисляем ширину/высоту таблицы через offsetWidth и offsetHeight
- вызываем FixHeaderCol

Там не так много кода, и комментарии есть   Функцию FixHeaderCol легко модифицировать под себя...
...
Рейтинг: 0 / 0
Таблица. Фиксированный заголовок, столбец.
    #39402968
kostiks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Коллеги, приветствую! Помогите допилить код под адаптивность. Нужно чтобы скрол появлялся в тех случаях, когда ширина таблицы, больше чем разрешение монитора.
Также заметил такую штуку, когда закрепляю первые два столбца, там есть colspan="2", вместо того чтобы учитывать как одну ячейку, он фиксирует следующую, получается как на картинке.
...
Рейтинг: 0 / 0
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Таблица. Фиксированный заголовок, столбец.
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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