Как вы дублируете функцию «заморозить панель» в таблице HTML?

У меня есть виджет в проекте ASP.NET, который я разрабатываю для моей работы. Он должен быть 300 пикселей в ширину и не может быть больше. К сожалению то, что они хотят, оказалось довольно сложным для такого маленького виджета. Вот что у меня есть прямо сейчас:

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

Как вы Как видите, это элемент управления аккордеоном jQuery UI. Поскольку каждая панель аккордеона e xpands выполняется вызов ajax для асинхронной загрузки его содержимого. Прямо сейчас он выдает HTML-таблицу, содержащую желаемые данные. Таблица находится внутри DIV со стилем overflow: auto; , так что мы получаем полосы прокрутки внизу и справа.

Моя проблема в том, что мне нужны некоторые довольно настраиваемые функции (например, возможность заморозить панель) в Excel). При прокрутке влево и вправо я хочу, чтобы все строки, включая заголовок, прокручивались влево и вправо , кроме для крайнего левого столбца «Название продукта». Примерно так:

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

При прокрутке вверх и вниз я хочу, чтобы все столбцы, включая левый, прокручивались вверх и вниз кроме для строки заголовка. Как это:

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

Как лучше всего реализовать эту функциональность? Или есть способ?