Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.12.2008, 15:29
Аспирант
Отправить личное сообщение для ilshat Посмотреть профиль Найти все сообщения от ilshat
 
Регистрация: 28.07.2008
Сообщений: 67

Фиксированный заголовок таблицы
Доброго времени суток.

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

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

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

Может кто встречался с чем нибудь подобным?
Ответить с цитированием
  #2 (permalink)  
Старый 19.12.2008, 16:24
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Как то так:
<!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 такой фокус не прокатывает во всех остальных браузерах работает.
Ответить с цитированием
  #3 (permalink)  
Старый 19.12.2008, 16:34
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Или вот еще способ, работает и в 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>

хз ток насколько универсальный
Ответить с цитированием
  #4 (permalink)  
Старый 19.12.2008, 17:49
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 24.07.2008
Сообщений: 1,271

чтобы при указании размеров ячейкам в пикселях они не разъезжались надо в стилях указывать table-layout:fixed;
Ответить с цитированием
  #5 (permalink)  
Старый 19.12.2008, 21:21
Аспирант
Отправить личное сообщение для ilshat Посмотреть профиль Найти все сообщения от ilshat
 
Регистрация: 28.07.2008
Сообщений: 67

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

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

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

Последний раз редактировалось ilshat, 19.12.2008 в 21:24.
Ответить с цитированием
  #6 (permalink)  
Старый 19.12.2008, 22:14
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

В IE6 можно скрыть <thead> через display: none; и через JavaScript добавить свой блок, с теме же заголовками и position: absolute;
Ответить с цитированием
  #7 (permalink)  
Старый 19.12.2008, 23:35
Аспирант
Отправить личное сообщение для ilshat Посмотреть профиль Найти все сообщения от ilshat
 
Регистрация: 28.07.2008
Сообщений: 67

Нашел на каком то форуме для отдельного фиксированного блока для 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;

может у кого еще есть идеи?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
позиция рисунка внутри ячейки таблицы. arlek1n Общие вопросы Javascript 11 22.12.2008 09:21
Обмен содержимым между ячейками таблицы. Forsaken Элементы интерфейса 8 02.12.2008 19:23
Электронные таблицы на JS gagagogo Элементы интерфейса 27 17.09.2008 21:07
Drag&Drop перетаскивание таблицы magistr_bender Элементы интерфейса 5 15.09.2008 14:33
Заголовок окна через JS Vasya Общие вопросы Javascript 2 12.09.2008 18:34