Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка столбцов таблицы (https://javascript.ru/forum/dom-window/15528-podsvetka-stolbcov-tablicy.html)

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 придётся отказаться, но в дивы можно запихнуть любые конструкции.


Часовой пояс GMT +3, время: 10:58.
Страница 2 из 4 < 1 2 34 >
Показывать 40 сообщений этой темы на одной странице