Фиксированный header таблицы по оси Y?

Question

[Артур Кох]

Добрый вечер.


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


Имеем блок с фиксированной высотой и шириной в экран. Внутри него располагается таблица. Данных много, следовательно кроме вертикального скролла, есть и горизонтальный.


В при вертикальном скролле(по оси Х) header таблицы должен оставаться на своем месте (position: fixed и вынесение в отдельный блок мне не помогло, дальше пишу почему). А вот при горизонтальном(Y) скролле header должен прокручиваться, так как пользователь должен видеть соответствующие заголовки ячеек.


Как быть?

<div>
<div class="header">таблица с хедером</div>
<div class="content">таблица с контентом</div> // div.content { overflow:auto; }
</div>

мое решение. В этом случае колонки хедера ровняются при помощи JS. Но косяк в том, что при широкой таблице и наличии горизонтального скролла вертикальный скроллбар уходит за пределы экрана.


В outlook это реализовано в контактах, но не средствами html, увы

Comments

[demimurych]

А чем продиктована необходимость делать это в блоке шириной и высотой в экран?

[Артур Кох]

Это не суть ситуации. Попробуйте решить задачу с блоком фиксированных размеров. Хотя мне собственно нужно не решение, а хотя бы наводка.

Answer 1

[Silver_Clash]

В одном проекте уже очень давно используется такой велосипед:

<div id="wrapper" class="xScroll">
  <div class="fixedHeader">
    <table>
      <thead>
        <tr>
          <td></td>
          ...
          <td></td>
        </tr>
      </thead>
    </table>
  </div>
  <div class="yScroll">
    <table>
      <tbody>
        <tr>
          <td></td>
          ...
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

.xScroll {
    overflow-x: hidden;
    width: 725px;
}
.yScroll {
    height: 300px;
    overflow: scroll;
    width: 100%;
}
.fixedHeader {
    overflow: hidden;
}

$('.yScroll').scroll(function () {
    $('.fixedHeader').scrollLeft($(this).scrollLeft());
});

Есть и более элегантные решения, вынуждены были использовать такое т.к. делалось под IE6…
Есть еще несколько нюансов в случаях когда ширина шапки не будет совпадать с шириной таблицы из-за появившегося скрола, но думаю вы с ними справитесь, тем более если у вас ширина выравнивается при помощи js.

Comments

[Артур Кох]

Как я не подумал об этом варианте. Спасибо. Утром протестирую.

[Артур Кох]

Событие скролл срабатывает только для объекта window. Или я что-то упускаю?

[Артур Кох]

Вру, все хорошо. Спасибо за решение.