Моя таблица состоит из двух столбцов: имя объекта и объекта. Имя - всего лишь одно слово. Объект может занимать несколько экранов. Я хочу сохранить имя поверх видимой части его ячейки. В этом случае, когда пользователь прокручивает страницу вниз, он может видеть имя объекта, пока объект не будет скрыт. Как я могу это сделать? Есть ли плагины для этого?Как выровнять текст td в верхней части видимой части ячейки?
ответ
Это всего лишь пара строк jQuery. http://jsfiddle.net/VuRvs/ Прикрепите обработчик к событию прокрутки окна, найдите свой «липкий» заголовок, расположите его на основе текущей позиции прокрутки, убедитесь, что они остаются внутри своего родительского элемента (TD).
$(window).on("scroll", function() {
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
$(".sticky").each(function() {
var elm = $(this);
var td = elm.parent("td");
var tdTop = td.offset().top;
var tdBot = tdTop + td.height() - elm.outerHeight();
if(y <= tdBot && y >= tdTop) {
// set a placeholder
if(td.children().length == 1)
td.append(elm.clone().removeClass("sticky").css("visibility", "hidden"));
elm.css("position", "absolute");
elm.css("top", y + "px");
}
});
});
Работает отлично, спасибо. – freopen
@freopen - Это был пример, если вы хотите распечатать эти таблицы, вы столкнетесь с проблемами с абсолютно позиционированием. Если печать станет проблемой, я бы установил 2 класса «липкий» и «ностальгический» держатель места (клонированный элемент) будет иметь класс «notsticky», а в печатном носителе CSS notsticky будет установлен на видимый и липкий, будет установлен отображать: нет –
Я не уверен в ваших требованиях. Вы можете посмотреть на это http://tablesorter.com/docs/. Надеюсь, он может вам помочь.
Нет, мне не нужно менять строки. Мне нужно заменить подпись внутри строки так, чтобы ее можно было увидеть с другим положением свитка. – freopen
То, что вы описываете, является постоянным заголовком или областью замораживания, такой как Excel.
Отметьте this link, это объясняется nicelly.
- 1. Идеально выровнять текст в верхней части ячейки таблицы
- 2. Как выровнять текст в верхней части TextView?
- 3. выровнять текст в верхней части div
- 4. Как выровнять текст в верхней или нижней части в CSS
- 5. Как выровнять список в верхней части страницы
- 6. html - Как выровнять таблицы в верхней части?
- 7. текст в верхней части изображения
- 8. Текст в верхней части изображения
- 9. Выровнять div в верхней части контейнера
- 10. Выровнять исходный текст текста в верхней части другого элемента (CSS)
- 11. Align текст в верхней части заголовка
- 12. Как я могу выровнять изображения в верхней части строки?
- 13. Как разместить текст в верхней части изображения
- 14. Как сделать текст в верхней части изображения
- 15. Выровнять содержимое панели до верхней части панели
- 16. iPhone: «Блокировка» ячейки в верхней части TableView
- 17. Выровнять кнопки по нижней части ячейки таблицы
- 18. Как выровнять текст в нижней части метки
- 19. Как выровнять текст в правой части андроида?
- 20. Как выровнять текст в правой части изображения?
- 21. выровнять текст в нижней части столбца (без использования ячейки таблицы)
- 22. Переместить изображение в верхней части ячейки
- 23. Выровнять ячейки таблицы в нижней части IOS5
- 24. Как отображать содержимое в верхней части ячейки таблицы?
- 25. Нажатие содержимого в HTML в верхней части ячейки (по вертикали)
- 26. Align верхней части изображения в верхней части TextView
- 27. UIButton set Текст в верхней части изображения
- 28. Вертикально центрированный текст в верхней части изображения
- 29. Сделать текст в верхней части ввода?
- 30. Добавить текст в верхней части файла
Вам нужно будет подключиться к событию прокрутки и вычислить положение прокрутки экрана и полностью поместить тег имени. Хотя это не сложно, это не тривиально. Возможно, вам захочется найти «плавающий заголовок таблицы». http://stackoverflow.com/search?q=floating+table+header –