Javascript-форум - Как прокрутить только тело таблицы?

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

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

- - Как прокрутить только тело таблицы? (https://javascript.ru/forum/dom-window/8834-kak-prokrutit-tolko-telo-tablicy.html)

GRIG	15.04.2010 14:00

Как прокрутить только тело таблицы?

Привет всем. Помогите с такой проблемой.
Нужно вывести на страницу блок информации, состоящий из постоянной и переменной частей. Грубо говоря, некий стандартный текст и после него таблица с заголовком и с переменным числом информационных строк. Неприятность в том, что для отображения всего этого дела выделен кусок экрана с фиксированной высотой, и изменять эту высоту нельзя. (Не "нежелательно", а именно "нельзя"). А количество информации при выводе обычно такое, что этой высоты не хватит, и понадобится прокрутка. Как сделать так, чтобы при необходимости прокручивался весь блок - это я разобрался (style="overflow:auto;" на div, выделенный для моего блока). Но хочется сделать покрасивее - чтобы постоянная часть оставалась на месте, а прокручивалось только тело таблицы. Почему-то аналогичный стиль на тег tbody не работает.
Есть какие идеи?
Заранее спасибо.

Skipp

15.04.2010 14:08

и не будет работать.
Делай два блока один с прокруткой, другой нет, возможно я не понял в чём соль.
Напиши понятнее и + код. А про то что фиксированные размеры я понял=)

GRIG	15.04.2010 14:19

Нужно нечто вроде такого:
<div id="..." style="max-height:300px; width:970px">
<table ... >
<thead ...>
<tr>
<TH ...>...</TH>
<th ...>...</th>
...
</tr>
</thead>
<tbody ...>
/* переменная часть, которую надо прокрутить */
</tbody>
</table>

Skipp

15.04.2010 15:47

Цитата:

Сообщение от GRIG (Сообщение 51730)

Нужно нечто вроде такого:

<div id="..." style="max-height:300px; width:970px">
<table ... >
<thead ...>
<tr>
<TH ...>...</TH>
<th ...>...</th>
...
</tr>
</thead>
<tbody ...>
<tr>
<td>
Вставь тут ещё див с overflow: auto;
</td>
</tr>
</tbody>
</table>

GRIG	15.04.2010 16:08

Вот прямо так внутрь <td>...</td> вставить? А смысл? Это же оторвет заголовки колонок от содержимого...

Aetae

15.04.2010 21:14

Почему не тупо так:

<style type="text/css">table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}</style>
<table style="height:100px; width:940px">
		<tr>
			<th>1111111</th>
			<th>2222222</th>
		</tr>
</table>
<div style="height:200px; width:970px;overflow:auto;" >
	<table style="width:940px;">
		<tr>
			<td>1<br><br><br><br><br><br></td>
			<td>2<br><br><br><br><br><br></td>
		</tr>
		<tr>
			<td>3<br><br><br><br><br><br></td>
			<td>4<br><br><br><br><br><br></td>
		</tr>
		<tr>
			<td>5<br><br><br><br><br><br></td>
			<td>6<br><br><br><br><br><br></td>
		</tr>
	</table>
</div>

PeaceCoder

15.04.2010 23:01

<style type="text/css">table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}</style>
<table style="height:100px; width:940px">
        <tr>
            <th>1111111</th>
            <th>2222222</th>
        </tr>
</table>
<div style="height:200px; width:970px;overflow:auto;" >
    <table style="width:940px;">
        <tr>
            <td>1sa das вафыва фыва asd fasd fasfd фыав as вафыва фыва фыва as вафы ваф sda sdf<br><br><br><br><br><br></td>
            <td>2<br><br><br><br><br><br></td>
        </tr>
        <tr>
            <td>3<br><br><br><br><br><br></td>
            <td>4<br><br><br><br><br><br></td>
        </tr>
        <tr>
            <td>5<br><br><br><br><br><br></td>
            <td>6<br><br><br><br><br><br></td>
        </tr>
    </table>
</div>

и?

Aetae

16.04.2010 02:31

Извращённой задаче - извращённое исполнение) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}
		td div {margin-top:-104px;margin-left:-2px;height:100px;position:absolute;border-left:1px solid #ddf;}
		</style>
	</head>
	<body>
		<div style="width:938px;height:100px;border:1px solid #ddf;background:#dfd"></div>
		<div style="width:970px;height:200px;overflow:auto;">
			<table style="width:940px;">
				<tr>
					<td><div>111111</div>1111111111111111111<br><br><br><br><br><br></td>
					<td><div>222222</div>222222222<br><br><br><br><br><br></td>
				</tr>
				<tr>
					<td>3<br><br><br><br><br><br></td>
					<td>4<br><br><br><br><br><br></td>
				</tr>
				<tr>
					<td>5<br><br><br><br><br><br></td>
					<td>6<br><br><br><br><br><br></td>
				</tr>
			</table>
		</div>
	</body>
</html>

Kolyaj

16.04.2010 10:41

Цитата:

Сообщение от Aetae

Извращённой задаче - извращённое исполнение) :

Да нормальная задача, вполне даже стандартная. Я даже видел где-то решение, но где -- не помню, а копаться щас неохота.

GRIG	16.04.2010 10:54

Цитата:

Сообщение от Aetae (Сообщение 51784)

Почему не тупо так:

<style type="text/css">table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}</style>
<table style="height:100px; width:940px">
		<tr>
			<th>1111111</th>
			<th>2222222</th>
		</tr>
</table>
<div style="height:200px; width:970px;overflow:auto;" >
	<table style="width:940px;">
		<tr>
			<td>1<br><br><br><br><br><br></td>
			<td>2<br><br><br><br><br><br></td>
		</tr>
		<tr>
			<td>3<br><br><br><br><br><br></td>
			<td>4<br><br><br><br><br><br></td>
		</tr>
		<tr>
			<td>5<br><br><br><br><br><br></td>
			<td>6<br><br><br><br><br><br></td>
		</tr>
	</table>
</div>

Не годится. Если посмотреть на результат этого кода, то невооруженным глазом видно, что вертикальная граница между ячейками "1111111" и "2222222" визуально не совпадает с вертикальной границей между ячейками "1" и "2". А хочется достичь полного совпадения, причем вне зависимости от того, что записано в ячейках.

PeaceCoder

16.04.2010 12:07

Aetae,
ну это да сработает. но а теперь попробуй отцентрировать заголовки. Еще может такой баг быть

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}
		td div {margin-top:-104px;margin-left:-2px;height:100px;position:absolute;border-left:1px solid #ddf;}
		</style>
	</head>
	<body>
		<div style="width:938px;height:100px;border:1px solid #ddf;background:#dfd"></div>
		<div style="width:970px;height:200px;overflow:auto;">
			<table style="width:940px;">
				<tr>
					<td><div style="text-align:center">Заголовок <br /><br /><br /><br /><br />Продолжение заголовка</div>1111111111111111111s df sdf sd fs fsd fsd fg sdfds sdf sd sd sdf sd gsdf sdfsd sdf sdf dsf <br><br><br><br><br><br></td>
					<td><div>222222</div>222222222<br><br><br><br><br><br></td>
				</tr>
				<tr>
					<td>3<br><br><br><br><br><br></td>
					<td>4<br><br><br><br><br><br></td>
				</tr>
				<tr>
					<td>5<br><br><br><br><br><br></td>
					<td>6<br><br><br><br><br><br></td>
				</tr>
			</table>
		</div>
	</body>
</html>

Aetae

16.04.2010 15:44

Если по поводу переноса строки - то это не баг, шапка должны быть фиксированной высоты, уж извиняйте.)

А по поводу ширины, разных бг заголовков итд - это уже косметические детали, кому нужно пусть и мучается, поставленная задача решена.)
Может сегодня ещё поковыряюсь - посмотрю.)

e1f	16.04.2010 16:01

Гуглим html table fixed header. Ответов много, и с JS, и без

Aetae

16.04.2010 16:29

Вот вариант, но мне <ins>не</ins> нравится, надо указывать ширину заголовков(или сверху навесить overflow:hidden,а ширину заголовков указать по максимуму):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<style type="text/css">
		table,td,th,tr{border:1px solid #ddf;border-collapse:collapse;}
		.th span, .hr {position:absolute;margin-top:-104px;}
		.th {text-align:center}
		.hr {width:1px;height:100px;margin-left:-2px;background:#ddf;}
		</style>
	</head>
	<body>
		<div style="width:938px;height:100px;border:1px solid #ddf;background:#dfd"></div>
		<div style="width:970px;height:200px;overflow:auto;">
			<table style="width:940px;">
				<tr>
					<td>
						<div class="th"><span style="width:200px;margin-left:-102px;">Заголовок<br>Продолжение заголовка</span></div>
						1111111111111111111<br><br><br><br><br><br>
					</td>
					<td>
						<div class="hr"></div><div class="th"><span style="width:100px;margin-left:-52px;">222222</span></div>
						222222222<br><br><br><br><br><br>
					</td>
				</tr>
				<tr>
					<td>3<br><br><br><br><br><br></td>
					<td>4<br><br><br><br><br><br></td>
				</tr>
				<tr>
					<td>5<br><br><br><br><br><br></td>
					<td>6<br><br><br><br><br><br></td>
				</tr>
			</table>
		</div>
	</body>
</html>

А сейчас действительно пойдём в гугль и посмотрим, что придумали умные люди.)
...а умные люди делают так, как я указал в первый раз, и не заморачиваются с растягиваемостью, тупо делая fixed таблицы, и я с ними полностью согласен.))

Globus

22.08.2014 18:40

http://hashcode.ru/questions/73178/h...таблице

Часовой пояс GMT +3, время: 10:52.