VPF::как зафиксировать хедер таблицы?

DimW

Дата 13.4.2007, 16:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1330
Регистрация: 24.2.2005
Где: Орёл

Репутация: нет
Всего: 44

всем привет!
вопрос следующий:

какое свойство css отвечает за закрепление обьектов в браузере, а конкретно:
таблица завернута в див, див фиксированной высоты со скролером - "overflow: auto;"
нужно закрепить хедер таблицы, так что бы при прокручивании скрола хедер оставался наместе.

для большего понимания код:

Код


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">
.tableContainer {
    clear: both;
    border: 1px solid #963;
    height: 285px;
    overflow: auto;
    width: 756px
}

thead.fixedHeader th {
    background: #C96;
    border-left: 1px solid #EB8;
    border-right: 1px solid #B74;
    border-top: 1px solid #EB8;
    font-weight: normal;
    padding: 4px 3px;
    text-align: left;
}
</style>

<body>

<div class = "tableContainer">
<table border="1" cellpadding="0" cellspacing="0" width="100%" >
<thead class = "fixedHeader">
    <tr>
        <th width="50px">first+</th>
        <th width="70px">second+</th>
        <th width="90px">third+</th>
        <th width="120px">fifth+</th>
    </tr>
</thead>
<tbody>
<script>
for(i=0;i<555;i+=5){
  document.write("<tr>");
  document.write("<td width='50px'>"+i+"</td>");
  document.write("<td width='70px'>"+i+"</td>");
  document.write("<td width='90px'>"+i+"</td>");
  document.write("<td width='0'>"+i+"</td>");
  document.write("</tr>");
}
</script>
</tbody>
</table>
</div>

</body>
</html>

можно конечно посоветывать что нить другое, но главные требывания должны быть такими:
1) только html + css
2) скроллер должын быть на всю высоту таблицы
3) див с таблицей должен абсолютно позиционироваться в браузере (style = "position:absolute; top:50; left:50;)

есть еще вариант, но он меня не устраивает отгрызанным скроллером с верху (требование №2)

Код


<table border="1" style = "position:absolute; top:50; left:50;">
<tr><td>
<table border="1">
<tr bgcolor="#8A8A8A">
<td width="50px">first+</td>
<td width="70px">second+</td>
<td width="90px">third+</td>
<td width="120px">fifth+</td>
</tr>
</table>
</td></tr>
<tr><td>


<div style="height:10em;overflow:auto;">
<table border="1" width="100%">
<script>
for(i=0;i<555;i+=5){
  document.write("<tr>");
  document.write("<td width='50px'>"+i+"</td>");
  document.write("<td width='70px'>"+i+"</td>");
  document.write("<td width='90px'>"+i+"</td>");
  document.write("<td width='0'>"+i+"</td>");
  document.write("</tr>");
}
</script>
</table>
</div>

</td></tr>
</table>

за ранее спасибо! с нетерпеньем жду ответов smile

Это сообщение отредактировал(а) DimW - 13.4.2007, 16:10

DimW

Дата 13.4.2007, 16:24 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1330
Регистрация: 24.2.2005
Где: Орёл

Репутация: нет
Всего: 44

браузер IE

SelenIT

Дата 13.4.2007, 20:46 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

DimW, первый вариант отсюда, после небольшой "доработки напильником" (чуть передвинуть заголовок и просто выкинуть лишнее), не подойдет? Правда, работает он только в режиме поддержки стандартов (с соответствующими DOCTYPE)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

DimW

Дата 16.4.2007, 08:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1330
Регистрация: 24.2.2005
Где: Орёл

Репутация: нет
Всего: 44

Цитата(SelenIT @ 13.4.2007, 20:46

)

DimW, первый вариант отсюда,

SelenIT, спасибо!
это все я видел, и напильником я тоже с этим работал, но.... smile

мне в данный момент интересно другое - во всех этих примерах огромные css-ки и мне бы из всего этого изобилия выдернуть только те свойства css которые отвечают только за фиксацию <thead> </thead>, может кто знает что это за свойство или группа свойств?

Это сообщение отредактировал(а) DimW - 16.4.2007, 08:17

DimW

Дата 16.4.2007, 15:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1330
Регистрация: 24.2.2005
Где: Орёл

Репутация: нет
Всего: 44

вобщем докопался до такого, работает как я понял только для IE
css:

Код


.thead_tr    
{
    position:relative; 
    top: expression(offsetParent.scrollTop); /*IE5+ only*/
}

если подключить этот класс к <tr> хедара, то он остается на месте при скроллиге.
но что все это значит я пока не вкурил.

Это сообщение отредактировал(а) DimW - 19.4.2007, 17:27

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »