Javascript-форум - Фиксированный заголовок таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Фиксированный заголовок таблицы (https://javascript.ru/forum/dom-window/2393-fiksirovannyjj-zagolovok-tablicy.html)

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

Доброго времени суток.

Таблица находится в слое с фиксированным размерами. Если она не вмещается в слой, то таблицу можно прокручивать вниз и соответственно заголовки таблицы скрываются.

Как можно сделать так, чтобы заголовки таблицы оставались на месте, а прокручивалось только тело таблицы.

Единственный вариант который пришел в голову- сделать две таблицы, верхнюю фиксировать, а нижнюю уже прокручивать, но тут натыкаюсь на засаду. Ширина колонок может не совпадать, даже если указывать размеры по пиксельно. Что делать даже не представляю.

Может кто встречался с чем нибудь подобным?

Как то так:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
position: relative;
}
.conteiner {
position: absolute;
top: 100px;
left: 200px;
height: 140px;
width: 500px;
background: #ccc;
}
table, tbody {
display: block;
}
tbody {
height: 100px;
overflow: auto;
}
td {
width: 100px;
}
</style>
</head>
<body>
	<div class="conteiner">
		<table>
			<thead>
				<tr>
					<th>Заголовок 1</th>
					<th>Заголовок 2</th>
					<th>Заголовок 3</th>
					<th>Заголовок 4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

В IE такой фокус не прокатывает :( во всех остальных браузерах работает.

Или вот еще способ, работает и в IE7,8:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
position: relative;
}
.conteiner {
position: absolute;
top: 100px;
left: 200px;
height: 100px;
width: 500px;
padding: 22px 0 0 0;
overflow: auto;
background: #ccc;
}
thead {
position: fixed;
top: 108px;
left: 208px;
width: 482px;
background: #fee;
}
td, th {
width: 125px;
text-align: left;
}
</style>
</head>
<body>
	<div class="conteiner">
		<table>
			<thead>
				<tr>
					<th>Заголовок 1</th>
					<th>Заголовок 2</th>
					<th>Заголовок 3</th>
					<th>Заголовок 4</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
				<tr>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
					<td>Ячейка</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

хз ток насколько универсальный

чтобы при указании размеров ячейкам в пикселях они не разъезжались надо в стилях указывать table-layout:fixed;

блин вот засада.
тут в основном на армах стоят хрюши с IE 6.0
и соответственно IE 6.0 выбран как базовый браузер, не заморачиваясь с поддержкой FF и оперы..

а больше способов нет? кроме как формировать шапку и тело таблицы в раздельных таблицах?

В IE 6.0 оба примера не работают :(

В IE6 можно скрыть <thead> через display: none; и через JavaScript добавить свой блок, с теме же заголовками и position: absolute;

Нашел на каком то форуме для отдельного фиксированного блока для IE 6.0

<head>
<style>
body
{
    background: url('about:blank') no-repeat;
    background-attachment: fixed;
}
</style>
<style>
.fixed {
width: 100%; padding: 0px; background-color: #f5f5ea; position: fixed; left:0px;top: 0px; right: 0px; //position: absolute; top: expression( eval(document.body.scrollTop) + 'px');
}
</style>
</head>
<body>
<div style="height:200%;">
<div class="fixed">
Этот блок остается на месте при прокрутке и не дрожжит =)
</div>
</div>
</body>

а для фиксированной шапки таблицы пришлось применить table-layout:fixed;

может у кого еще есть идеи?