Несколько таблиц с плавающей шапкой на странице
 

На странице есть несколько таблиц одна под другой. Нужно чтобы верхняя строчка каждой таблицы ездила вверх-вниз в пределах данной страницы вслед за вертикальной перемоткой окна браузера. Можно это сделать только с помощью css или надо на JS?

js нужен, не уверен, что это реализуемо для таблиц сверстанных через теги table tr td

А если я каждой шапке таблицы добавлю двойника с position: fixed, который будет отображаться или нет в зависимости от положения окна браузера?

<table>
	<tbody>
		<tr class="t_head" id="1">
			<th style="width: 70px;">Период</th>
			<th style="width: 15px;"></th>
			<th>DBL</th>
			<th>SGL</th>
			<th>Реб. 03-11</th>
		</tr>
...

if($(".t_head#1").length>0) {
	$(".t_head#1").clone().insertAfter(".t_head#1").addClass("t_head_fixed");
}

Осталось только сделать проверку того, что верхняя граница окна пересекает таблицу. И ещё у каждой шапки свой id. Код я привёл для шапки с id=1. Как сделать, чтобы клон создавался для каждой шапки по её id?

Hurray,

Да, именно это мне и надо! Можно код?

Hurray,
в инете полно плагинов типа http://www.novasoftware.com/Download...ixedTable.aspx
если вам понравился мой код - меняю на тугрики - предложения в личку :thanks:

Когда делаю

$(".t_head#1").clone().insertAfter(".t_head#1").addClass("t_head_fixed");

, то как сделать, чтобы все ячейки плавающей строки были по ширине как в исходной строке?

1 через css задать ширину ячейкам
2 обойти все ячейки 1 строки таблицы и ширину присвоить каждой ячейке клона соотвественно

Можно ли получить разом все css свойства элемента и передать их другому элементу?

как растянуть теги <th> на всю ширину родительского <tr>? а то они все прижались к левому краю внутри него.

а зачем? кроме ширины остальное через таблицу стилей

Hurray,
может без th ? на одних td

Этим скриптом ширина каждой ячейки копируется из стандартной строки в фиксированную:

i2 = 1;
	$("table#" + i + " .t_head th").each(function (){
		arw[i2] = $(this).width();
		i2 ++;
	})
	i2 = 1;
	$("table#" + i + " .t_head.t_head_fixed th").each(function (){
		$(this).width(arw[i2]);
		i2 ++;
	})

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

Как можно поменять все th на td с сохранением атрибутов и содержимого?

Hurray,
можно и с th )))
добавил th в первую таблицу

Объясните мне, почему при таком коде ширина столбцов не совпадает?
В строке, которая не fixed, фактическая ширина совсем не та, которая указана в атрибуте style. Проверял в firebug. В стилях одна ширина, в макете - другая.

<tr class="t_head" style="width: 801px;">
	<th style="width: 72px;">Период</th>
	<th style="width: 16px;"></th>
	<th style="width: 45px;">DBL</th>
	<th style="width: 73px;">3 человека</th>
	<th style="width: 73px;">4 человека</th>
	<th style="width: 65px;">5 человек</th>
	<th style="width: 65px;">6 человек</th>
	<th style="width: 65px;">7 человек</th>
	<th style="width: 65px;">8 человек</th>
</tr>
<tr class="t_head t_head_fixed" style="width: 801px;">
	<th style="width: 72px;">Период</th>
	<th style="width: 16px;"></th>
	<th style="width: 45px;">DBL</th>
	<th style="width: 73px;">3 человека</th>
	<th style="width: 73px;">4 человека</th>
	<th style="width: 65px;">5 человек</th>
	<th style="width: 65px;">6 человек</th>
	<th style="width: 65px;">7 человек</th>
	<th style="width: 65px;">8 человек</th>
</tr>

Hurray,
содержимое растягивает

width ставится скриптом

while ($("table#" + i).length) {
		var i2 = 1;
		$("table#" + i + " .t_head th").each(function (){
			if(i2 > 2){
				$(this).css('width', $(this).width());
			}
			i2 ++;
		})
}

Как сделать, чтобы ширина измерялась с учетом этого растягивания?

Hurray,
напишите полноценный макет с html здесь или в песочнице http://learn.javascript.ru/play

Hurray,
$(this).css('width', $(this).width()); -- это типа установить ширину не ширее прежнего

вот пример: http://lucky-brand.ru/hotels/seychel...ia_Resort.html

Hurray,
по ссылке фиксируется div

Не понял, поясни

Hurray,
а что нужно увидеть по вашей ссылке?

таблицы на вкладке "цены".

Hurray,
ок видел -- берёте нужные ячейки клона и нужные ячейки таблицы -- и делаите ширину одинаковой -- в чём проблемато ?

Hurray,
:write: добавил border ячейкам для наглядности

а чего вкладки стали такие большие в высоту?

так кроме Google Chrome есть и другие браузеры :)