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

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, время: 13:53.