Фиксированный заголовок таблицы
 

Вопрос состоит в следующем:
Как заставить заголовок/1ю строку таблицы быть фиксированной, что бы она не прокручивалась вместе со всей таблицей, если таблица выходит за границы видимости например diva ? Типо как в Exсel...

Интересует именно таблица, т.к. через фикс ширину столбцов не подходит...

П.С. я не мастак верстки но этот вопрос мучает давно уже.

position:fixed?

неподходит. т.к. position:fixed|absolute выдирают из потока элемент и он теряет ширину столбца + координаты все получается в куче. Пытался обертку делать td div:relative div:absolute, но при этом td теряет минимальную ширину столбца от названия самого столбца и получается опять фигня...

ие и FF, а остальные ? Разве нет кросса?

Мараторий,
Изврат.

http://www.webreview.org.ua/?id=3&ac...etail&ar_id=39
А вообще, гугл: "таблица с прокруткой html"

разве что убить скролл страницы, растянуть таблицу по высоте и добавить для <tbody> скролл через overflow:auto;

Увы, сейчас я далеко от десктопного браузера (и пьян), но на словах:
У обвертки ставим релейтив оверфлоу: скролл, внутри каждой ТэАш'ки заголовка - див с абсолютом. Результат: таблица прокручивается, а её заголовки позиционируются от обвертки.

Годен только на фикс ширины столбцов иначе ширина абсолютов становится минимальной а не размеру ячейки и получается фигня.

Хоть я и не мастак верстки, но элегантное кросс решение все же сделал =)

увы… Да.

Попросили вылижить мое решение. Решение элегантное потому что таблица становится не такой как ее привыкли видеть

П.С. могут быть проблемы в ИЕ6. А так решение кроссбраузерное вроде.
Недостаток: Столбцы заголовка по центру без JS не выровнять.Зато плюс большой: как не крути размеры .block таблица выглядит нормально, если конечно размеры не меньше минимальной ширины заголовка. Тогда заголовок вылезает заширину таблицы

<style type='text/css'>
.block {
  width:80%;
  height: 100px;
  position: absolute;
  top: 20px;
  overflow: visible;
  }
.scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
.head.fixed {
  height: 20px;
  top: -20px;
  position: absolute;
  background: LemonChiffon;
  border-bottom: 1px solid black;
  width: 100%;
  }
.table {
  border-collapse: collapse;
  }
.table td { border: 1px solid gray; border-top: 0px;}
tr.head td {  height:0; } 
tr.head td .st {
  white-space: nowrap;
  position: absolute; 
  top: -20px;
  height: 20px;
  border-left: 1px solid gray;
  line-height: 20px;
  padding-left: 10px;
  margin-left: -1px;
  }
tr.head td .or { white-space: nowrap; height:0; overflow: hidden; padding-left: 10px;}
</style>

<div class='block'>
<div class="scroll">

<div class="head fixed"></div>

<table cellpadding="0" cellspacing="0" class="table">
  <tr class='head'>
    <td width="100"><div class='st'>Столб</div><div class='or'>Столб</div></td>  <!-- должны быть одинаковые значениея для авто подгонки столбцов по заголовкам -->
    <td><div class='st'>Столбец 2 длинный</div><div class='or'>Столбец 2 длинный</div></td>
    <td><div class='st'>Столбец 3 очень длинный </div><div class='or'>Столбец 3 очень длинный</div></td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
</table>

</div>
</div>

дубль

Вообще, можно джаваскриптом решить достаточно просто. Нужно лишь посчитать ширину столбцов таблицы и потом применить это к заголовку. Рабочий пример - фиксированный заголовок таблицы