Re: Висящие строки и столбцы у таблиц
От: andrew_www  
Дата: 20.06.06 17:05
Оценка:
Здравствуйте, Аноним, Вы писали:

А>Всем известно что у таблицы могут быть висящие строки и столбцы, которые все время отображаются при прокрутке таблице на экране.
А>1. Как правильно делать такие строки и столбцы (я знаю только вариант с фреймами) для
А>просмотра в браузере?
А>2. Как настроить печать из браузера, чтобы такие строки и столбцы печатались на каждой странице?

привет!
есть одно решение!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Pure CSS Scrollable Table with Fixed Header</title>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="language" content="en-us">
<script type="text/javascript">
function fix()
{
tableContainer.obj = headTH;
tableContainer.obj.style.top = tableContainer.scrollTop + "px";
tableContainer.obj.style.pagging = "10px";
}
</script>
<style type="text/css">
<!--
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 756px;
}
div.tableContainer table {
float: left;
width: 740px
}

#headTH {
position: relative
}

#headTH td {
background: #C00;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
}


td.normalRow {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid blue;
border-top: 1px solid blue;
padding: 2px 3px 3px 4px
}

-->
</style></head><body>

<div id="tableContainer" class="tableContainer" onscroll="fix();">
<table class="scrollTable" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr id="headTH">
<td class="normalRow"><a href="#">Header 1</a></td>
<td class="normalRow"><a href="#">Header 2</a></td>
<td class="normalRow"><a href="#">Header 3</a></td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>
<tr class="scrollContent">
<td class="normalRow">Cell Content 1</td>
<td class="normalRow">Cell Content 2</td>
<td class="normalRow">Cell Content 3</td>
</tr>

</table>
</div>

</body></html>
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.