Как заблокировать первую строку и первый столбец таблицы при прокрутке, возможно, с использованием JavaScript и CSS?
Как создать таблицу, в которой первая и первая колонки заблокированы, как в Excel, при активации «замораживания окон»? Мне нужна таблица для прокрутки по горизонтали и по вертикали (для этого существует множество решений, но только для вертикальной прокрутки). Итак, когда вы прокрутите вниз в таблице, первая строка останется на месте, так как она будет иметь заголовки столбцов. Это может оказаться в thead , или это может быть не так, что облегчает решение. При прокрутке вправо первый столбец остается помещенным, так как он содержит метки для строк. Я уверен, что это невозможно с помощью CSS, но может ли кто-нибудь указать мне на решение JavaScript? Он должен работать во всех основных браузерах.
Привет, я знаю, что это немного устарело, но вы получили рабочее решение для этого? Ответ, помеченный как правильный, теперь имеет неработающие ссылки. Я пытаюсь выяснить то же самое здесь: stackoverflow.com/questions/743663/…
11 ответов
Хорошо, я искал прокручиваемую таблицу с фиксированным столбцом, чтобы понять необходимость этого конкретного требования, и ваш вопрос был одним из них без каких-либо близких ответов.
Плагин в основном преобразует хорошо отформатированную HTML-таблицу в прокручиваемую таблицу с фиксированным заголовком таблицы и столбцами.
Использование приведено ниже,
Вы можете проверить демонстрацию и документацию
Я проследил за вашей хорошей работой, и у меня возник вопрос, предваряется ли все это тем фактом, что вы должны предоставлять фиксированную ширину colModal массив colModal ? У меня есть таблица с переменной шириной столбца, и я не могу понять, как заставить этот случай работать с вашим кодом. Интересно, это каскадная зависимость от значения ширины свойства width number Set the initial width of the column, in pixels. This value currently can not be set as percentage colModal width number Set the initial width of the column, in pixels. This value currently can not be set as percentage
Он делает именно то, что вы хотите, и действительно легкий и простой в использовании.
Кажется, это не поддерживает блокировку первого столбца. Или я что-то упустил? Если нет, то это решение не лучше, чем «общее» решение, которое я упомянул в вопросе.
Вам понадобятся две таблицы, где первая — точная надпись поверх второй. Второй содержит все данные, в которых первый содержит только первый столбец. Вы должны синхронизировать его ширину и в зависимости от содержимого также высоту его строк.
Дополнительно к этим двум таблицам вам нужен третий. Это первая строка, которая лежит точно между двумя другими и должна быть синхронизирована таким же образом.
Здесь вам понадобится абсолютное позиционирование. Затем вы синхронизируете прокрутку таблицы данных с прокручивающимися позициями главной строки и первой таблицы столбцов.
Это работает очень хорошо во всех основных браузерах, за исключением одной проблемы: синхронизированная прокрутка будет трепетать. Чтобы исправить это, вам понадобятся два контейнера div div, которые содержат клонирование содержимого строки заголовка и первого столбца. При прокрутке по вертикали вы показываете клон строки заголовка, чтобы предотвратить трепетание, в то время как вы перемещаете оригинал в фоновом режиме. При прокрутке по горизонтали вы показываете первый клон строки. То же самое здесь.
Это намного сложнее, чем я хотел, но в конечном итоге это было то, что я в итоге сделал (более или менее). Кажется, что это должно быть намного проще, чем есть .
Я сделал это с помощью комбинации:
- Использование нескольких таблиц
- Ячейки фиксированного размера
- Функции jQuery scrollTop и scrollLeft
Не тестировались во всех браузерах, но я думаю, что это не очень хорошо для старых версий IE.
$("#clscroll-content").scroll(function() < $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop()); $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft()); >); $("#clscroll-column-headers").scroll(function() < $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft()); >); $("#clscroll-row-headers").scroll(function() < $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop()); >);.clscroll table < table-layout: fixed; >.clscroll td, .clscroll th < overflow: hidden; >.corner-header < float: left; >.column-headers < float: left; overflow: scroll; >.row-headers < clear: both; float: left; overflow: scroll; >.table-content < table-layout: fixed; float: left; overflow: scroll; >.clscroll td, .clscroll th < width: 200px; border: 1px solid black; >.row-headers, .table-content < height: 100px; >.column-headers, .table-content, .table-content table, .column-headers table
Bus Plane Boat Bicycle
Red Green Blue Orange Purple Yellow Pink Brown
Red Bus Red Plane Red Boat Red Bicycle Green Bus Green Plane Green Boat Green Bicycle Blue Bus Blue Plane Blue Boat Blue Bicycle Orange Bus Orange Plane Orange Boat Orange Bicycle Purple Bus Purple Plane Purple Boat Purple Bicycle Yellow Bus Yellow Plane Yellow Boat Yellow Bicycle Pink Bus Pink Plane Pink Boat Pink Bicycle Brown Bus Brown Plane Brown Boat Brown Bicycle
Очень хорошо сделано, спасибо. Я раздвоил это, чтобы иметь только две полосы прокрутки jsfiddle.net/2sc64
Сегодня для этого существует множество решений для нескольких браузеров, среди которых SuperTable, которые мне нравятся благодаря своей элегантности и простоте (в настоящее время продолжение с MooGrid) и SlickGrid с его удивительным набором функций.
Это плагин jQuery, который не позволяет прокручивать строки и столбцы таблицы. Он может принимать заданный объект таблицы HTML и устанавливать его так, чтобы он мог заморозить определенное количество столбцов или строк или и то, и другое, поэтому фиксированные столбцы или строки не прокручиваются. Строки, подлежащие замораживанию, должны быть размещены в секции головки стола. Он также может заморозить строки и столбцы в сочетании с атрибутами colspan или rowspan.
Вам нужно было бы протестировать его, но если бы вы встроили iframe в свою страницу, то использовали CSS для абсолютно позиционирования 1-й строки и столбца в 0,0 на странице iframe, которая бы решила вашу проблему?
Если я не понимаю вас неправильно, я не думаю, что это позволило бы обновлять заголовки при прокрутке данных (т.е. прокручивать заголовки строк, когда данные прокручиваются вниз, чтобы заголовки строк по-прежнему соответствовали соответствующим строкам).
Таблица сортировки и блокировки — единственное решение, которое я видел, которое работает в других браузерах, чем IE. (хотя этот » заблокированный столбец css» тоже может сделать трюк»). Требуемый блок кода ниже.
/* Scrollable Content Height */ .scrollContent < height:100px; overflow-x:hidden; overflow-y:auto; >.scrollContent tr < height: auto; white-space: nowrap; >/* Prevent Mozilla scrollbar from hiding right-most cell content */ .scrollContent tr td:last-child < padding-right: 20px; >/* Fixed Header Height */ .fixedHeader tr < position: relative; height: auto; >/* Put border around entire table */ div.TableContainer < border: 1px solid #7DA87D; >/* Table Header formatting */ .headerFormat < background-color: white; color: #FFFFFF; margin: 3px; padding: 1px; white-space: nowrap; font-family: Helvetica; font-size: 16px; text-decoration: none; font-weight: bold; >.headerFormat tr td < border: 1px solid #000000; background-color: #7DA87D; >/* Table Body (Scrollable Content) formatting */ .bodyFormat tr td < color: #000000; margin: 3px; padding: 1px; border: 0px none; font-family: Helvetica; font-size: 12px; >/* Use to set different color for alternating rows */ .alternateRow < background-color: #E0F1E0; >/* Styles used for SORTING */ .point < cursor:pointer; >td.sortedColumn < background-color: #E0F1E0; >tr.alternateRow td.sortedColumn < background-color: #c5e5c5; >.total NAME ![]()
Amt ![]()
Lvl ![]()
Rank ![]()
Position ![]()
Date ![]()
Maha $19,923.19 100 100 Owner 01/02/2001 Thrawl $9,550 159 100% Co-Owner 11/07/2003 Marhanen $223.04 83 99% Banker 06/27/2006 Peter $121 567 23423% FishHead 06/06/2006 Jones $15 11 15% Bubba 10/27/2005 Supa-De-Dupa $145 91 32% momma 12/15/1996 ClickClock $1,213 23 1% Dada 1/30/1998 Mrs. Robinson $99 99 99% Wife 07/04/1963 Maha $19,923.19 100 100% Owner 01/02/2001 Thrawl $9,550 159 100% Co-Owner 11/07/2003 Marhanen $223.04 83 59% Banker 06/27/2006 Peter $121 567 534.23% FishHead 06/06/2006 Jones $15 11 15% Bubba 10/27/2005 Supa-De-Dupa $145 91 42% momma 12/15/1996 ClickClock $1,213 23 2% Dada 1/30/1998 Mrs. Robinson $99 99 (-10.42%) Wife 07/04/1963 Maha -$19,923.19 100 (-10.01%) Owner 01/02/2001 Thrawl $9,550 159 -10.20% Co-Owner 11/07/2003 TOTAL: 999999 9999999 99
Да, это работает для вертикальной прокрутки, но не для горизонтальной прокрутки. Это общее решение, которое я упомянул в вопросе.
Это решение имеет большое преимущество перед некоторыми другими, заключающееся в том, что структура таблицы остается неизменной и имеет смысл. Для блокировки только заголовков это возможно лучшее решение.
Спасибо за комментарий Мистер Шин и Нью. Может быть, это заслуживает небольшого удара (+1 в голосовании) в конце концов? (Примечание: это сообщение сообщества, для меня нет репутации)