HTML-таблица с горизонтальной и вертикальной прокруткой и фиксированными заголовками И фиксированной шириной столбца - PullRequest
3 голосов
/ 23 июля 2011

У меня есть таблица HTML, которую я хотел бы иметь

  1. вертикальная прокрутка
  2. горизонтальная прокрутка
  3. фиксированные заголовки (которые не выполняют вертикальную прокрутку, но выполняют горизонтальную прокрутку)
  4. фиксированная ширина столбца - то есть фиксированная компоновка таблицы
  5. в идеале, фиксированный первый столбец (например, стоп-кадры)

Мои исследования показывают, что вы не можете сделать это в чистом CSS, потому что типичная стратегия состоит в том, чтобы создать div заголовка для заголовков, а затем еще один div для данных таблицы, а затем использовать jQuery / javascript для синхронизации прокрутки данные заголовка / таблицы.

Я попробовал несколько плагинов и действительно глубоко погрузился в эти два

http://fixedheadertable.com/

http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx

Однако эти плагины не работают для меня, потому что мне нужно / я предпочитаю иметь фиксированную ширину столбцов, а не авторазмеры.

Если у кого-нибудь есть решение моей проблемы или вы можете порекомендовать, как изменить плагины для фиксированной ширины, это было бы очень признательно!

Надеюсь, я не буду просить слишком много!

Ответы [ 2 ]

2 голосов
/ 03 августа 2011

Я думаю, что исправляемый nova jquery в порядке, его особенности:

  • Разрешить горизонтальную и вертикальную прокрутку
  • Поддержка нескольких таблиц HTML с фиксированным заголовком и столбцами на одной странице
  • Количество фиксированных столбцов можно настроить
  • Можно настроить цвета фона каждой строки при наведении курсора мыши

в любом случае, почему бы не спросить их разработчиков. http://www.novasoftware.com/contactus.aspx

0 голосов
/ 19 июня 2013

Мне представили ту же проблему, и я предложил облегченное решение вашей проблемы.Что я сделал: Решение моей проблемы состояло в том, чтобы сделать это в buildFixedTable: заменил var th = $(1*).appendTo(target); на var th = $(2*).appendTo(target);

и добавил OnRowDataBound="GridView1_RowDataBound" к определению сетки И сделал защищенный обработчик пустот для этого, где яустановить ширину столбцов.

Вуаля!

1* = (lt)table(gt)(lt)/table(gt)
2* = (lt)table(gt)(lt)col style=width:20%(gt)(lt)col style=width:20%(gt)(lt)col style=width:60%(gt)(lt)/table(gt)

Где

lt = Less_than_sign gt = Greater_than_sign

Может потребоваться некоторое тестирование дляваша реализация, но это решило мою проблему ...

...