Javascript-форум - Подсветка столбцов таблицы

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

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

- - Подсветка столбцов таблицы (https://javascript.ru/forum/dom-window/15528-podsvetka-stolbcov-tablicy.html)

ctocopok

02.03.2011 21:57

Подсветка столбцов таблицы

Сделать подсветку строчек не проблема - onMouseOver и onMouseOut для <tr> спасают вебмастера.

Но вот проблема. Таблица - просто стена текста (даже больше цифирей), и это все как-то сплошняком. Хочется улучшить читабельность путем выделения не только строки, но и столбца - подсветкой.

Для справки, строк до 108 в таблице, столбцов - порядка 28.
Данные, в основном, числовые, иногда десятичные дроби, иногда целые числа.

Размышлял, додумался лишь до проставления каждой ячее таблицы свойств onMouseXXX, и в обработчиках вычислять (по id, наверное), что за ячея событие вызвала, к какому столбцу принадлежит, затем все ячеи в этом столбце "красить" или класс им менять.
Может, есть попроще решения?

Еще вопрос. Как сделать заголовок у таблицы неподвижным (не скроллящимся), а скроллить только тело таблицы? Аналог "закрепить области" в экселе.

Заранее благодарен.

Aetae

03.03.2011 00:12

<table style="width:100%;">
	<col style="background:#ddf">
	<col style="background:#fdf">
	<col style="background:#dff">
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
</table>

2. http://www.imaputz.com/cssStuff/bigFourVersion.html

ctocopok

03.03.2011 01:15

Спасибо за решение с col style="", возможно, действительно обойдусь без наворотов ява-скрипта.
Хотя, задавая вопрос, предполагал именно динамическое выделение, по наведению курсора.

второй пункт еще не отсмотрел, но заранее благодарен :)

ctocopok

03.03.2011 02:18

Йолке!
Красивое решение по фиксированным заголовкам. Но в моем случае ползет и разъезжается. Теряется синхронизация заголовка с данными таблицы, двустрочные (rowspan="2") заголовки тоже по ветру пошли.

http://wwoott.narod.ru/scroll.html со скроллом (фикс. заголовки)
http://wwoott.narod.ru/noscroll.html без скролла (как раньше было)

может, я что-то очень важное в CSS упустил, но что?

ksa	03.03.2011 09:03

ctocopok, может уже пора тут тестовые примеры свои выкладывать? Или все делать за тебя?

Андрей38

03.03.2011 10:32

http://www.scriptsite.ru/jquery-18 Скрол для таблици с фиксир заголовками ... Ниче коректно не работает ! Нужно превращать head th в фиксированные дивы . Читал , что Квери плагин сортировки таблиц имеет такие юсер-установки . Но я так и не понял , как это установить . По умолчанию- заголовки- как табл.заголовки

ctocopok

03.03.2011 11:11

Цитата:

Сообщение от ksa (Сообщение 94717)

ctocopok, может уже пора тут тестовые примеры свои выкладывать? Или все делать за тебя?

не понял. в чем меня обвиняют?

тестовые примеры - по ссылкам, обширные таблицы.

в таблице 35 столбцов, как только задаешь thead tr блочным элементом, "синхронизация" координат со столбцами слетает.

ksa	03.03.2011 11:27

Цитата:

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

в чем меня обвиняют?

В личном бездействии в решении твоеё же проблемы. :D

Цитата:

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

тестовые примеры - по ссылкам, обширные таблицы.

А ты сделай небольшей тестовый пример, выложи тут. На нём можно будет вести какие-то тесты...

Цитата:

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

в таблице 35 столбцов, как только задаешь thead tr блочным элементом, "синхронизация" координат со столбцами слетает.

Не делай thead tr блочным элементом... :D

ctocopok

03.03.2011 11:32

Да не, я не бездействую, я пыжусь локально, только не получается, к сожалению.

небольшой тестовый пример попробую наваять. через часок. но какая разница, тут пример, или те линки, что я выложил повыше?

3. не делать thead tr блочным - это не иметь фиксированного на месте заголовка. смысл всей возни именно в таком заголовке. правда, загляните в две ссылки, станет понятно, с чем я имею дело, и что плохо получается

ksa	03.03.2011 14:01

Цитата:

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

но какая разница, тут пример, или те линки, что я выложил повыше?

- Пример будет одинаковым у всех.
- Его можно менять как захочется.
- Его видно прямо тут и никуда ходить не нужно.

Цитата:

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

не делать thead tr блочным - это не иметь фиксированного на месте заголовка.

Не всегда всё бывает так однозначно...

ctocopok

03.03.2011 22:33

Последовал совету мудрого Каа, то есть Ksa. Отредактил пример, из трех столбцов сделал семь, примеру поплохело (синхронизации ширины заголовка столбца и ячейки столбца не стало). Жаль.

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

ctocopok

03.03.2011 23:43

Прекрасный тег "col", и почему я про него раньше не знал?
Только вот недостатки:
в хроме и опере кол должен быть определен до начала тега tbody, IE6 и FF едят этот тег и внутри tbdoy

бОльший недостаток - несмотря на уверения онлайн учебников по хтмл, что тег col может иметь обработчик onmouseover, практика показывает, что это не так.
вот пример:

<table>
 <col style='background-color: lightgreen' onmouseover='alert("col event");'>
 <tr>
  <td>no event</td><td>231</td>
 </tr>
 <tr>
  <td onmouseover='alert("td event");'>has event</td><td>231</td>
 </tr>
 <tr>
  <td>no event</td><td>231</td>
 </tr>
</table>

Aetae

04.03.2011 02:59

Вот тебе велосипед, сляпаный мной только-что.)
Прост как лом, какие баги - говори.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
.fHeader  * {margin:0;padding:0}
.fHeader {
	padding-top:24px;	/* высота загаловка, соот-но если больше 1 строки-увеличить. */
	
	float:left;
	position:relative;
	overflow:hidden;
	background:#ddf;
	border-right:1px solid #000;
}
.fHeaderScroll {
	width:416px;
	height:90px;
	overflow:auto;
	border-bottom:1px solid #000;
}
.fHeader table {
	width:400px; 	
	border-collapse:collapse;
}
.fHeader td, .fHeader tr {
	border:1px solid #000;
	overflow:hidden
}
.fHeaderHead {
	height:0;
	overflow:hidden;
	text-align:left
}
.fHeaderHead div {
	height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */

	position:absolute;
	top:0;
	background:#ddf;
	width:300%;
	border:1px solid #000;
	margin-left:-1px;
}
.fHeaderFirst, .fHeaderFirst td {
	border-top:0 !important
}
.fHeaderLast, .fHeaderLast td {
	border-bottom:0 !important
}
</style>
</head>
<body>


<div class="fHeader">
	<div class="fHeaderScroll">
		<table style="">
			<col style="background:#ddf">
			<col style="background:#fdf">
			<col style="background:#dff">
			<tr class="fHeaderFirst">
				<td>
					<div class="fHeaderHead">
						<div style="background:#ddf">header 1</div>
						header 1
					</div>
				1
				</td>
				<td>
					<div class="fHeaderHead">
						<div style="background:#fdf">header 2</div>
						header 2
					</div>
				2
				</td>
				<td>
					<div class="fHeaderHead">
						<div style="background:#dff">header 3456789</div>
						header 3456789
					</div>
				3
				</td>
			</tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr><td>1</td><td>2</td><td>3</td></tr>
			<tr  class="fHeaderLast"><td>1</td><td>2</td><td>3</td></tr>
		</table>
	</div>
</div>
</body>
</html>

ksa	04.03.2011 09:05

Цитата:

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

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

Пока небудет от тебя путнего примера с твоими "сложными" и "многострочными" шапками таблиц ничего даже пробовать не стану... :D

Но одну из идей уже показал Aetae (видать добрейшей души человек). :)
Причем без всяких дисплэй блок... :D Без которого (с твоих слов ctocopok) ничего не будет работать...

ctocopok

04.03.2011 10:52

Aetae,
Очень клево. Не могу понять, правда, в чем фишка, почему оно работает и именно так работает :) Но ведь работает же!
Посмотрю, как можно приладить это к моим нуждам.

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

но раз уж так просите:

<table style="text-align:right" cellpadding="1">
<tr bgcolor="white" align="center">
<td rowspan=2>Name</td>
<td colspan=3 align=center>XP</td><td rowspan=2>Battles</td><td colspan="2">Wins</td><td rowspan=2>Losses</td><td colspan="2">survival</td>
<td rowspan="2">Battle lifetime</td><td colspan="3">frags</td><td colspan="2">dmg dealt</td><td rowspan="2">dmg rcvd</td><td rowspan="2">dmg<br/>ratio</td><td rowspan="2">shots</td><td rowspan="2">hits</td><td rowspan="2">%%</td>
<td rowspan="2">spotted</td><td colspan="2">base pts</td><td colspan="3">frag stats</td>
<td rowspan="2">battlehero</td><td rowspan="2">warrior</td><td rowspan="2">invader</td><td rowspan="2">sniper</td><td rowspan="2">defender</td><td rowspan="2">steelwall</td><td rowspan="2">supporter</td><td rowspan="2">scout</td>
</tr>
<tr>
<td>total</td><td>avg</td><td>Max</td><td>#</td><td>%</td><td>#</td><td>%</td>
<td>#</td><td>avg</td><td>max</td>
<td>amt</td><td>avg</td>
<td>capture</td><td>defend</td><td>lvl 8+</td><td>beasts</td><td>diff types</td>
</tr>
<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
<td>T1 Cunningham
</td>
<td>432</td>
<td>72</td>
<td>120</td>
<td>
6
</td><td>
2
</td><td>
33.3%
</td><td>
4
</td><td>
0
</td><td>
0.0%
</td><td>
15m26s
</td><td>
1
</td><td>
0.17
</td><td>
1
</td><td>
116
</td><td>
19
</td><td>
660
</td><td>
0.17
</td><td>
53
</td><td>
15
</td><td>
28.3
</td><td>
3
</td><td>
0
</td><td>
27
</td><td>
0
</td><td>
0
</td><td>
1
</td>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
<td>T57
</td>
<td>2703</td>
<td>168</td>
<td>332</td>
<td>
16
</td><td>
8
</td><td>
50.0%
</td><td>
8
</td><td>
6
</td><td>
37.5%
</td><td>
1h31m17s
</td><td>
17
</td><td>
1.06
</td><td>
4
</td><td>
2084
</td><td>
130
</td><td>
1514
</td><td>
1.37
</td><td>
110
</td><td>
27
</td><td>
24.5
</td><td>
8
</td><td>
0
</td><td>
53
</td><td>
0
</td><td>
0
</td><td>
13
</td>
<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
</tr>
</table>

ksa	04.03.2011 11:00

Цитата:

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

можно по ссылкам

По ссылкам не хожу... Рассматриваю только тестовые примеры тут.

ksa	04.03.2011 11:36

ctocopok, для однострочной (не сложной шапки) с чётким указанием размера колонок, подойдёт такой вариант...

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
	position: relative;
}
#box_head {
	height: 23px;
	background: orange;
}
#content {
	height: 70px;
	overflow: auto;
}
table {
	background: #000000;
}
td {
	background: #ffffff;
}
thead td {
	background: silver;
}
#head_tr1 {
	position: absolute;
	top: 0;
	left: 0;
	background: #000000;
}
</style>
<script>
</script>
</head>
<body>
<div id='container'>
	<div id='box_head'></div>
	<div id='content'>
		<table style="text-align:right" cellpadding="1">
		<col span='35' width='30px' />
		<thead>
			<tr id='head_tr1'>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</thead>
		<tbody>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T1 Cunningham
				</td>
				<td>432</td>
				<td>72</td>
				<td>120</td>
				<td>
				6
				</td><td>
				2
				</td><td>
				33.3%
				</td><td>
				4
				</td><td>
				0
				</td><td>
				0.0%
				</td><td>
				15m26s
				</td><td>
				1
				</td><td>
				0.17
				</td><td>
				1
				</td><td>
				116
				</td><td>
				19
				</td><td>
				660
				</td><td>
				0.17
				</td><td>
				53
				</td><td>
				15
				</td><td>
				28.3
				</td><td>
				3
				</td><td>
				0
				</td><td>
				27
				</td><td>
				0
				</td><td>
				0
				</td><td>
				1
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T57
				</td>
				<td>2703</td>
				<td>168</td>
				<td>332</td>
				<td>
				16
				</td><td>
				8
				</td><td>
				50.0%
				</td><td>
				8
				</td><td>
				6
				</td><td>
				37.5%
				</td><td>
				1h31m17s
				</td><td>
				17
				</td><td>
				1.06
				</td><td>
				4
				</td><td>
				2084
				</td><td>
				130
				</td><td>
				1514
				</td><td>
				1.37
				</td><td>
				110
				</td><td>
				27
				</td><td>
				24.5
				</td><td>
				8
				</td><td>
				0
				</td><td>
				53
				</td><td>
				0
				</td><td>
				0
				</td><td>
				13
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T57
				</td>
				<td>2703</td>
				<td>168</td>
				<td>332</td>
				<td>
				16
				</td><td>
				8
				</td><td>
				50.0%
				</td><td>
				8
				</td><td>
				6
				</td><td>
				37.5%
				</td><td>
				1h31m17s
				</td><td>
				17
				</td><td>
				1.06
				</td><td>
				4
				</td><td>
				2084
				</td><td>
				130
				</td><td>
				1514
				</td><td>
				1.37
				</td><td>
				110
				</td><td>
				27
				</td><td>
				24.5
				</td><td>
				8
				</td><td>
				0
				</td><td>
				53
				</td><td>
				0
				</td><td>
				0
				</td><td>
				13
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T57
				</td>
				<td>2703</td>
				<td>168</td>
				<td>332</td>
				<td>
				16
				</td><td>
				8
				</td><td>
				50.0%
				</td><td>
				8
				</td><td>
				6
				</td><td>
				37.5%
				</td><td>
				1h31m17s
				</td><td>
				17
				</td><td>
				1.06
				</td><td>
				4
				</td><td>
				2084
				</td><td>
				130
				</td><td>
				1514
				</td><td>
				1.37
				</td><td>
				110
				</td><td>
				27
				</td><td>
				24.5
				</td><td>
				8
				</td><td>
				0
				</td><td>
				53
				</td><td>
				0
				</td><td>
				0
				</td><td>
				13
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T57
				</td>
				<td>2703</td>
				<td>168</td>
				<td>332</td>
				<td>
				16
				</td><td>
				8
				</td><td>
				50.0%
				</td><td>
				8
				</td><td>
				6
				</td><td>
				37.5%
				</td><td>
				1h31m17s
				</td><td>
				17
				</td><td>
				1.06
				</td><td>
				4
				</td><td>
				2084
				</td><td>
				130
				</td><td>
				1514
				</td><td>
				1.37
				</td><td>
				110
				</td><td>
				27
				</td><td>
				24.5
				</td><td>
				8
				</td><td>
				0
				</td><td>
				53
				</td><td>
				0
				</td><td>
				0
				</td><td>
				13
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
			<tr onMouseOver="this.className='td_moder';" onMouseOut="this.className='';">
				<td>T57
				</td>
				<td>2703</td>
				<td>168</td>
				<td>332</td>
				<td>
				16
				</td><td>
				8
				</td><td>
				50.0%
				</td><td>
				8
				</td><td>
				6
				</td><td>
				37.5%
				</td><td>
				1h31m17s
				</td><td>
				17
				</td><td>
				1.06
				</td><td>
				4
				</td><td>
				2084
				</td><td>
				130
				</td><td>
				1514
				</td><td>
				1.37
				</td><td>
				110
				</td><td>
				27
				</td><td>
				24.5
				</td><td>
				8
				</td><td>
				0
				</td><td>
				53
				</td><td>
				0
				</td><td>
				0
				</td><td>
				13
				</td>
				<td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td>
			</tr>
		</tbody>
		</table>
	</div>
</div>
</body>
</html>

ksa	04.03.2011 11:39

Упс... А работает-то на 100% только в ИЕ. :(
В остальных браузерах нужно будет контролировать ширину колонок вложеными дивами...

ctocopok

05.03.2011 00:20

ksa,
спасибо за труды. К сожалению, в самом же основном своем браузере я этот пример увидел "криво". Ибо у меня ФФ в фаворитах.
Я еще ковыряюсь с "велосипедом" от Aetae. Велосипед на тестовых дорожках едет (простенькие таблицы), а в поле выпускаю - все кривеет. Не могу понять, где косячу.

И два вопроса сразу. Зачем в заголовочных ячейках по два дива?

<td>
*!*
                    <div class="fHeaderHead">
                        <div style="background:#ddf">*!*header 1*/!*</div>
*/!*
                        *!*header 1*/!*
                    </div>
                1
                </td>

зачем два раза писать заголовок (header 1), виден-то все равно только один.
ну и еще недостаток, который, наверное, фича - это первая строка, которая по идее, обычно, заголовок - тут является данными :)

Сейчас посмотрю, что будет с отображением, когда появятся ячейки с rowspan и colspan

Aetae

05.03.2011 01:02

header продублирован, чтобы он также растягивал колонку в случае если он длиннее чем данные в ней.(Поправил пример для наглядности.)
От rowspan в header'e придётся отказаться, но в дивы можно запихнуть любые конструкции.

ctocopok

05.03.2011 01:06

А почему один-то хедер не будет колонку растягивать?

От rowspan придется отказаться. понял. жаль. ну да ладно.
главное, чтобы colspan работал :)

а кто-нибудь что-нибудь знает про onmouseover для <col> ?
он и не должен отрабатывать? :(

ksa	05.03.2011 08:34

Цитата:

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

а кто-нибудь что-нибудь знает про onmouseover для <col> ?
он и не должен отрабатывать?

Так вроде никто такого и не обещал... Сам кол и так пока не очень-то поддерживается (может уже поддерживался) браузерами.

Aetae

05.03.2011 21:12

Чего тут сложного. Ставишь mouseover на всю таблицу, вычисляешь event.target/srcElement, находишь какой он по счёту(cellIndex) и меняешь у соответствующего col стиль.)

Кстати допилил чуток велосипед. Теперь он не зависит от ширины скроллбара и свободно растягивается на любую заданную ширину(можно и в процентах).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
	var table=document.getElementsByTagName('table')[0];
	var cells=table.rows[table.rows.length-1].cells;
	var hoverDiv=document.createElement('div');
	hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
	table.onmouseover=function(e){
		var t=e?e.target:window.event.srcElement;
		while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
		if(t.tagName=='TD') {
			cells[t.cellIndex].appendChild(hoverDiv);
		}
	}
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
	border:1px solid #bbb;
}
.fHeader {
	padding-top:24px;	/* высота загаловка, соот-но если больше 1 строки-увеличить. */
	width:100%; /*ширина*/
	height:102px;  /*высота - 24px на header,  -1px на нижний border*/
	/* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
	font-family: MS Sans serif,Verdana,Arial;
	border-bottom:1px solid #bbb;
	position:relative;
	overflow:hidden;
}
.fHeaderScroll {
	border-right:1px solid #bbb;
	height:100%;
	overflow:auto;
	overflow-x:hidden;/*opera fix*/
}
.fHeader table {
	width:100%; 	
	border-collapse:collapse;
}
.fHeaderFix {
	zoom:1 /*ie fix*/
} 
.fHeader thead div{
	height:0;
	text-align:left;
	overflow:hidden;
}
.fHeader thead div div {
	height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
	background:#ddd; /*цвет header'a по дефалту*/
	border:1px solid #aaa;
	position:absolute;
	top:0;
	width:300%;
	margin-left:-1px;
}
.fHeaderTop{
	margin-top:-24px; /* высота загаловка */
	height:22px; /* высота загаловка (-2px на border) */
	border:1px solid #aaa;
	position:relative;
	z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
	border-bottom:0 
}
.fHeader thead tr, .fHeader thead td{
	border-top:0;
}
</style>
</head>
<body>
<h3>Таблица спецсимволов html</h3>
<div class="fHeader">
	<div class="fHeaderTop">
	</div>
	<div class="fHeaderScroll">
		<div class="fHeaderFix">
			<table>
			<thead>
			<tr>
				<td>
					<div><div>Имя</div>Имя</div>
					 &amp;nbsp;
				</td>
				<td>
					<div><div>Код</div>Код</div>
					 &amp;#160;
				</td>
				<td>
					<div>	<div>Вид</div>Вид</div>
					 &nbsp;
				</td>
				<td>
					<div><div>Описание</div>Описание</div>
					 неразрывный пробел
				</td>
			</tr>
			</thead>
			<tbody>
			<tr><td>&amp;iexcl;</td><td>&amp;#161;</td><td>¡</td><td>перевернутый восклицательный знак</td></tr>
			<tr><td>&amp;cent;</td><td>&amp;#162;</td><td>¢</td><td>цент</td></tr>
			<tr><td>&amp;pound;</td><td>&amp;#163;</td><td>£</td><td>фунт стерлингов</td></tr>
			<tr><td>&amp;curren;</td><td>&amp;#164;</td><td>¤</td><td>денежная единица</td></tr>
			<tr><td>&amp;yen;</td><td>&amp;#165;</td><td>¥</td><td>иена или юань</td></tr>
			<tr><td>&amp;brvbar;</td><td>&amp;#166;</td><td>¦</td><td>разорванная вертикальная черта</td></tr>
			<tr><td>&amp;sect;</td><td>&amp;#167;</td><td>§</td><td>параграф</td></tr>
			<tr><td>&amp;uml;</td><td>&amp;#168;</td><td>¨</td><td>трема (знак над гласной для произнесения ее отдельно от предшествующей гласной; напр., na¨ve)</td></tr>
			<tr><td>&amp;copy;</td><td>&amp;#169;</td><td>©</td><td>знак copyright</td></tr>
			<tr><td>&amp;ordf;</td><td>&amp;#170;</td><td>ª</td><td>женский порядковый числитель</td></tr>
			<tr><td>&amp;laquo;</td><td>&amp;#171;</td><td>«</td><td>левая двойная угловая скобка</td></tr>
			<tr><td>&amp;not;</td><td>&amp;#172;</td><td>¬</td><td>знак отрицания</td></tr>
			<tr><td>&amp;shy;</td><td>&amp;#173;</td><td></td><td>место возможного переноса</td></tr>
			<tr><td>&amp;reg;</td><td>&amp;#174;</td><td>®</td><td>знак зарегистрированной торговой марки</td></tr>
			<tr><td>&amp;macr;</td><td>&amp;#175;</td><td>¯</td><td>знак долготы над гласным</td></tr>
			<tr><td>&amp;deg;</td><td>&amp;#176;</td><td>°</td><td>градус</td></tr>
			</tbody>
			<tfoot>
				<tr><td>&amp;bdquo;</td><td>&amp;#8222;</td><td>„</td><td>нижняя двойная кавычка</td></tr>
			</tfoot>
			</table>
		</div>
	</div>
</div>
</body>
</html>

.....upd
Ан нет, опера цучко не меняет динамически стиль у col, так что обломчик.

.....upd2
Добавил вариант подсветки колонок, не самый лучший, зато самый быстрый в случае больших таблиц.)
Велосипеды такие велосипеды.

ctocopok

06.03.2011 12:44

Aetae,
Супер-супериор.

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

она (образно) такова:

<table border="1" cellpadding="0" >
<tr bgcolor="#ccffcc"><td colspan="2" align="center">ученик</td><td>оценка</td></tr>
<tr bgcolor="#ccffcc"><td>Имя</td><td>Фамилиё</td><td>&nbsp;</td></tr>

<tr><td>Вася</td><td>Пупкин</td><td>2</td></tr>
<tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
<tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
<tr><td>Гриша</td><td>Овечкин</td><td>2</td></tr>
</table>

И вот хотелось бы ей обе стровчки-то и зафиксировать. Фиг с ним с RowSpan, он не так важен, но просто многострочность (два TR) нужна, и объединение заголовков в верхней строке тоже нужно.
Видимо, во второй строке тоже как-то дивы надо позиционировать, попадая ровно-ровно под дивы первой строки?

Aetae

07.03.2011 12:03

Для кого комменты ставил?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
    var table=document.getElementsByTagName('table')[0];
    var cells=table.rows[table.rows.length-1].cells;
    var hoverDiv=document.createElement('div');
    hoverDiv.style.cssText="position:relative;height:10000px;margin-top:-10000px;background:#ddf;z-index:-1";
    table.onmouseover=function(e){
        var t=e?e.target:window.event.srcElement;
        while(t.tagName!='TD'&&t.tagName!='TABLE')t=t.parentNode;
        if(t.tagName=='TD') {
            cells[t.cellIndex].appendChild(hoverDiv);
        }
    }
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr{
    border:1px solid #bbb;
}
.fHeader {
 *!*   padding-top:47px;    /* высота загаловка, соот-но если больше 1 строки-увеличить. */*/!*
    width:100%; /*ширина*/
    height:102px;  /*высота - 24px на header,  -1px на нижний border*/
    /* background:#fdfffd; цвет таблицы по дефалту(не совместим с подсветкой колонок =) )*/
    font-family: MS Sans serif,Verdana,Arial;
    border-bottom:1px solid #bbb;
    position:relative;
    overflow:hidden;
}
.fHeaderScroll {
    border-right:1px solid #bbb;
    height:100%;
    overflow:auto;
    overflow-x:hidden;/*opera fix*/
}
.fHeader table {
    width:100%;    
    border-collapse:collapse;
}
.fHeaderFix {
    zoom:1 /*ie fix*/
}
.fHeader thead div{
    height:0;
    text-align:left;
    overflow:hidden;
}
.fHeader thead div div {
    height:22px; /* высота загаловка (-2px на border), соот-но если больше 1 строки-увеличить. */
    background:#ddd; /*цвет header'a по дефалту*/
    border:1px solid #aaa;
    position:absolute;
    top:0;
    width:300%;
    margin-left:-1px;
}
*!*.fHeader div.fHeaderLower {*/!*
*!*     top:23px;*/!*
 *!*}*/!*

*!* .fHeader div.fHeaderMiddle {*/!*
 *!*    height:45px;/* высота загаловка (-2px на border) */*/!*
 *!*    line-height:45px;*/!*
 *!*}*/!*

*!*.fHeaderTop{*/!*
*!*    margin-top:-47px; /* высота загаловка */*/!*
*!*    height:45px; /* высота загаловка (-2px на border) */ */!*

    border:1px solid #aaa;
    position:relative;
    z-index:2;
}
.fHeader tfoot tr, .fHeader tfoot td {
    border-bottom:0
}
.fHeader thead tr, .fHeader thead td{
    border-top:0;
}
</style>
</head>
<body>
<div class="fHeader">
    <div class="fHeaderTop">
    </div>
    <div class="fHeaderScroll">
        <div class="fHeaderFix">
            <table>
            <thead>
            <tr>
                <td>
                    <div><div>ученик</div></div>
                    <div><div class="fHeaderLower">Имя</div>Имя</div>
                    Вася
                </td>
                <td>
                    <div><div class="fHeaderLower">Фамилиё</div>Фамилиё</div>
                     Пупкин
                </td>
                <td>
                    <div><div class="fHeaderMiddle">оценка</div>оценка</div>
                    2
                </td>
            </tr>
            </thead>
            <tbody>

              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>
              <tr><td>Степа</td><td>Ступкин</td><td>2</td></tr>
              <tr><td>Миша</td><td>Печкин</td><td>2</td></tr>

            </tbody>
            <tfoot>
                <tr><td>Гриша</td><td>Овечкин</td><td>2</td></tr>
            </tfoot>
            </table>
        </div>
    </div>
</div>
</body>
</html>

ctocopok

07.03.2011 12:48

Цитата:

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

Для кого комменты ставил?)

Я был очень, ОЧЕНЬ невнимателен. не заметил классов "хедер миддл" и "хедер нижний" :)

Спасибо!! Буду тестить.

Aetae

07.03.2011 12:57

Ну они какбэ очевидны.)

Aetae

08.03.2011 12:49

Всё основано на том что элемнты с position:absolute отсчитывает вою позицию от ближайшего родителя с position отличной от static(по умолчанию)

<style type="text/css">div {border:1px solid #050;padding:1px;}</style>
<div style="position:relative">
  relative
  <div style="overflow:auto;height:80px">
    обычный
    <span style="position:absolute;top:0">/absolute/</span>
    текст
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

Андрей38

20.03.2011 11:59

Цитата:

Сообщение от ctocopok (Сообщение 94691)

...Нашел переключатель подсветки для колонок в виде плагина. Вопрос еще актуален ?

ctocopok

20.03.2011 12:54

немного актуален. если можно, ссылку, пожалуйста, я поглядел бы.

Андрей38

23.03.2011 15:04

Цитата:

Сообщение от ctocopok (Сообщение 97320)

немного актуален. если можно, ссылку, пожалуйста, я поглядел бы.

ОК. Там 150 %. Еще лучьше, чем Вы себе можете представить:)
http://htmldrive.net/items/demo/735/...ght-Tablecloth
Если Вы оценили мой труд над ответом _ щелкните на + кармы ).. И там тоже не забудьте щелкнуть

ctocopok

14.06.2011 01:42

Aetae,
я дозрел до вмудрения сортировки своей мегатаблицы. Но вот беда, заголовки не реагируют на клики. Пытался onclick сделать и дивам, и TD в шапке таблицы - нуль реакшн.
Я настырный. Я в заголовки таблицы втыкнул кнопки (input type="button" onclick="func(this)" value="^_^">) но толку не было. Кнопки тоже не чуют кликов по себе.
Почему так, и как победить?

примерный хмтл, что я докореживаю, я вывалил на http://wwoott.narod.ru/j_t.html

Мне несложно, конечно, и в футер засобачить сортировку, но народ к этому не привыкший :)

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