Ответ 1
Я построил нечто похожее, но гораздо менее сложное: я хотел, чтобы первая строка таблицы (заголовки) была заморожена, а строки данных прокручивались вертикально. Я реализовал его как две разные таблицы, каждая с ячейками фиксированной ширины, каждая в своем DIV. "Header" div просто сидел статичным, а "body" div использовал переполнение: авто для прокрутки.
Ваша проблема сложнее, потому что вы хотите "заморозить панели" на обеих осях и поддерживать прокрутку по обоим осям (у меня было гораздо больше недвижимости для работы, и вам не приходилось учитывать горизонтальную прокрутку по все). Тем не менее, мне интересно, можете ли вы начать с этой должности и работать оттуда...
Определить 4 divs:
- NW: этот не прокручивается вообще, никогда. Это ячейка "product name" в вашем примере
- NE: этот прокручивается только по горизонтали. Это строка заголовка/заголовка в вашем примере
- SW: этот только свиток только по вертикали. Это левый столбец в вашем примере
- SE: этот прокручивает оба направления. Это первичная сетка данных в вашем примере
С 4 DIVs вы будете иметь дело с 4 различными таблицами, поэтому нам нужно будет поддерживать ширину своих ячеек и высоту ячеек. В идеале мы могли бы сделать это во время рендеринга, если мы сможем сделать их фиксированными значениями. В противном случае мы могли бы написать jquery/JS на стороне клиента, чтобы перебирать ячейки в таблице SE, когда страница сначала загружает (или изменяет размер), и заставляет размер других таблиц соответствовать им.
С 4 DIVs нам также необходимо синхронизировать прокрутку: когда SE прокручивается горизонтально, NE должен прокручиваться до той же позиции. Когда SE прокручивается вертикально, SW должен прокручиваться до той же позиции. Я подозреваю, что должны быть некоторые события прокрутки на клиентской стороне, которые мы можем подключить, чтобы обнаружить, когда SE прокручивается. В рамках этих событий мы должны иметь возможность принудительно прокручивать NE и/или SW.
Извините, это такой неопределенный/абстрактный ответ. Ничтожному исполнению чего-то подобного потребуется больше времени, чем я мог бы удобно уйти от моей основной работы. Но это то, что дребезжало в моем мозгу, так что я решил поделиться им с вами. Надеюсь, это поможет вам хоть немного приблизиться к решению. Ура!