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

Самый простой и лучший способ зафиксировать заголовок таблицы.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

table {
border: 0px; /* border="0" */
border-collapse: collapse; /* cellspacing="0" */
}

table tr th {
padding: 0px; /* cellpadding="0" */
}

table tr td {
padding: 0px; /* cellpadding="0" */
}

div.header-wrapper {
width: 320px;
border: 1px solid black;
border-bottom: none;
}

div.body-wrapper {
overflow: auto;
width: 320px;
height: 110px;
border: 1px solid black;
border-top: none;
}

table.header {
width: 300px;
border-bottom: 1px solid black;
}

table.body {
width: 300px;
}

table.header tr td {
border-right: 1px solid black;
}

table.body tr td {
border-right: 1px solid black;
border-bottom: 1px solid black;
}

table.body tr.last-row td {
border-bottom: none;
}

table tr td.first {
width: 150px;
}

</style>
<title>Fix Table Header</title>
</head>
<body>

<div class="header-wrapper">
<table class="header">
<tr>
<td class="first">Column 1</td>
<td class="last">Column 2</td>
</tr>
</table>
</div>

<div class="body-wrapper">
<table class="body" >
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr>
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
<tr class="last-row">
<td class="first">Value 1</td>
<td class="last">Value 2</td>
</tr>
</table>
</div>

</body>
</html>

CSS

четверг, 19 сентября 2013 г.

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

Комментариев нет:

Отправить комментарий

четверг, 19 сентября 2013 г.

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

Комментариев нет:

Отправить комментарий

четверг, 19 сентября 2013 г.