Таблица с скроллируемым <tbody>

Great Rash · August 25, 2009

Необходимо сделать таблицу у которой <thead> будет фиксированным, а <tbody> будет скроллироваться. И чтоб в ИЕ работало. Есть у кого идеи?

Желательно без скриптов, но в принципе и скриптами можно если чистым CSS никак нельзя.

s0rr0w · August 25, 2009

Необходимо сделать таблицу у которой <thead> будет фиксированным, а <tbody> будет скроллироваться. И чтоб в ИЕ работало. Есть у кого идеи?
Желательно без скриптов, но в принципе и скриптами можно если чистым CSS никак нельзя.

Ищите в инете. Есть примеры и со скриптами и условно без скриптов...

Great Rash · August 25, 2009

Собственно прежде чем создать топик я искал. Но результата, работающего во всех браузерах так и не нашел. В итоге я придумал свое решение, с небольшой помощью скрипта, но по большей части на CSS с использованием table-layout: fixed;

В любом случае спасибо.

psywalker · August 25, 2009

А можно узнать пример кода на будущее?

dark_hero · August 25, 2009

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

Great Rash · August 25, 2009

dark_hero

Приведенный вами пример у меня не заработал в ИЕ. А в Мозилле работал криво.

psywalker

Вот такая штука у меня получилась:

<?xml version="1.0" encoding="utf-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" xml:lang="en" lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		table {
			width: 100%;
			table-layout: fixed;
		}

		td {
			background: #efc;
			border: #69c 1px solid;
		}

		div {
			overflow-y: scroll;
			height: 100px;
		}
	</style>

	<script type="text/javascript">
		function normalize() {
			var h = document.getElementById('head');
			var b = document.getElementById('body');
			var c = document.getElementById('cont');

			h.style.width = b.style.width = c.offsetWidth - 17 + 'px';
		} 

		window.onload = function() {
			normalize();
		}

		window.onresize = function() {
			normalize();
		}
	</script>
</head>
<body>

	<table id="head">
		<tr>
			<td>
				header
			</td>
			<td>
				header
			</td>
			<td>
				header
			</td>
			<td>
				header
			</td>
			<td>
				header
			</td>
		</tr>
	</table>
	<div id="cont">
		<table id="body">
			<tr>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
			</tr>
			<tr>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
			</tr>
			<tr>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
			</tr>
			<tr>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
			</tr>
			<tr>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
				<td>
					cell
				</td>
			</tr>
		</table>
	</div>

</body>
</html>

Edited August 25, 2009 by Great Rash

psywalker · August 25, 2009

Спасибо, я только не понял, зачем нужен JS, если можно просто таблице задать ширину?

Great Rash · August 25, 2009

JS нужен из-за того, что ширину я хочу резиновую. А при ширине 100% в ИЕ7 появляется горизонтальный скролл. Плюс в Мозилле и ИЕ8 немного криво стоит шапка таблицы. Скрипт уменьшает ширину таблицы от исходной на 17 пикселей (ширина скроллбара).

Есть только один минус - надо ставить overflow: scroll; вместо overflow: auto; иначе будут некрасивости.

psywalker · August 25, 2009

аа, понял, спасибо дружище

dark_hero · August 26, 2009

dark_hero
Приведенный вами пример у меня не заработал в ИЕ. А в Мозилле работал криво.

не знаю, не знаю, у меня все отлично работает и в ие и в фф, проверьте еще раз, может не так что-нибудь сделали:

http://neoprizma.net/demo/table-with-fixed-header.html

Great Rash · August 26, 2009

Вы пробовали поставить doctype к этому коду? В ИЕ7 у второй таблицы прокрутки нет, а у первой таблицы ячейки частично уехали под скролл.

Sign In

Таблица с скроллируемым <tbody>

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information