Xpoint
   [напомнить пароль]

Фиксированные столбец и строка а-ля Excel

Метки: [без меток]
2007-03-31 04:32:08 [обр] Максим Кулькин(0/3)[досье]
сообщение промодерировано

Имеется таблица с большим количеством столбцов и строк. Хочется, чтобы при скроле содержимого таблицы верхняя строка (шапка) и крайний левый столбец оставались всегда видны (но при этом скролировались соответственно: если сдвинули основной контент на несколько строк вниз, то и в левом столбце не видно несколько первых строк. И наоборот для строки шапки).

Как проще всего реализовать такое ?
Кросс-браузерность не нужна: интересует решение только для Firefox.

У меня сейчас сделано так:

<style type="text/css">
  #columns-content, #content {
    width: 500px;
  }

  #rows-content, #content {
    height: 500px;
  }

  #columns-content, #rows-content {
    overflow: hidden;
  }

  #content {
    overflow: auto;
  }
</style>

<table>
  <tr>
    <td></td>
    <td>
      <div id="columns-container">
         Columns content
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="rows-content">
        Rows content
      </div>
    </td>
    <td>
      <div id="content">
        Content
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  function initScroll() {
    var cc = document.getElementById('columns-content');
    var rc = document.getElementById('rows-content');
    var c = document.getElementById('content');
    c.onscroll = function() {
      cc.scrollLeft = c.scrollLeft;
      rc.scrollTop = c.scrollTop;
    }
  }

  initScroll();
</script>

Есть ли более красивый вариант ?

спустя 29 дней [обр] Сергей Прогонный(0/1)[досье]
Только средствами css это не сделать. Говорю о css2, возможно css3 что-то предложит - не знаю.
Так что скриптовое решение ИМХО единственный вариант.
Powered by POEM™ Engine Copyright © 2002-2005