Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как зафиксировать хедер таблицы?


Автор: DimW 13.4.2007, 16:08
всем привет!
вопрос следующий:

какое свойство 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:24
браузер IE

Автор: SelenIT 13.4.2007, 20:46
DimW, первый вариант http://cssplay.co.uk/menu/tablescroll.html, после небольшой "доработки напильником" (чуть передвинуть заголовок и просто выкинуть лишнее), не подойдет? Правда, работает он только в режиме поддержки стандартов (с соответствующими DOCTYPE)...

Автор: DimW 16.4.2007, 08:15
Цитата(SelenIT @  13.4.2007,  20:46 Найти цитируемый пост)
DimW, первый вариант отсюда, 


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

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

Автор: DimW 16.4.2007, 15:20
вобщем докопался до такого, работает как я понял только для IE
css:
Код

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


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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)