Показать сообщение отдельно
  #15 (permalink)  
Старый 24.12.2010, 11:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,123

amaz245, мне понравился вот такой вариант с прокруткой таблички...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
#container {
	font-family: Tahoma;
	font-size: 10pt;
	border: 1px solid;
	color: #000000;
}
#head {
	height: 16px;
	background-color: orange
}
#box {
	height: 100px;
	overflow: auto;
}
table {
	border: 1px solid;
	border-collapse: collapse;
}
th,
td {
	border: 1px solid;
}
thead tr  {
	position: absolute;
	top: 0;
	left: 0;
}
.c1 {
	width: 100px;
}
.c2 {
	width: 200px;
}
.c3 {
	width: 300px;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<div id='head'></div>
	<div id='box'>
		<table>
			<thead>
				<tr>
					<th class='c1'>Колонка 1</th>
					<th class='c2'>Колонка 2</th>
					<th class='c3'>Колонка 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
				<tr>
					<td class='c1'>Всякие там данные колонки 1</td>
					<td class='c2'>Всякие там данные колонки 2</td>
					<td class='c3'>Всякие там данные колонки 3</td>
				</tr>
			<tbody>
		</table>
	</div>
</div>
</body>
</html>
Ответить с цитированием