Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 03.03.2011, 21:33
Интересующийся
Отправить личное сообщение для ctocopok Посмотреть профиль Найти все сообщения от ctocopok
 
Регистрация: 02.03.2011
Сообщений: 19

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

Вопрос остается открытым - как сделать фиксированный заголовок у таблицы, который бы не скроллился при большом количестве строк.
Ответить с цитированием
  #12 (permalink)  
Старый 03.03.2011, 22:43
Интересующийся
Отправить личное сообщение для ctocopok Посмотреть профиль Найти все сообщения от ctocopok
 
Регистрация: 02.03.2011
Сообщений: 19

Прекрасный тег "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>

Последний раз редактировалось ctocopok, 03.03.2011 в 22:50.
Ответить с цитированием
  #13 (permalink)  
Старый 04.03.2011, 01:59
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,625

Вот тебе велосипед, сляпаный мной только-что.)
Прост как лом, какие баги - говори.)
<!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>

Последний раз редактировалось Aetae, 05.03.2011 в 00:04.
Ответить с цитированием
  #14 (permalink)  
Старый 04.03.2011, 08:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

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

Но одну из идей уже показал Aetae (видать добрейшей души человек).
Причем без всяких дисплэй блок... Без которого (с твоих слов ctocopok) ничего не будет работать...
Ответить с цитированием
  #15 (permalink)  
Старый 04.03.2011, 09:52
Интересующийся
Отправить личное сообщение для ctocopok Посмотреть профиль Найти все сообщения от ctocopok
 
Регистрация: 02.03.2011
Сообщений: 19

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>
Ответить с цитированием
  #16 (permalink)  
Старый 04.03.2011, 10:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Сообщение от ctocopok
можно по ссылкам
По ссылкам не хожу... Рассматриваю только тестовые примеры тут.
Ответить с цитированием
  #17 (permalink)  
Старый 04.03.2011, 10:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

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>
Ответить с цитированием
  #18 (permalink)  
Старый 04.03.2011, 10:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,781

Упс... А работает-то на 100% только в ИЕ.
В остальных браузерах нужно будет контролировать ширину колонок вложеными дивами...
Ответить с цитированием
  #19 (permalink)  
Старый 04.03.2011, 23:20
Интересующийся
Отправить личное сообщение для ctocopok Посмотреть профиль Найти все сообщения от ctocopok
 
Регистрация: 02.03.2011
Сообщений: 19

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

И два вопроса сразу. Зачем в заголовочных ячейках по два дива?
<td>
*!*
                    <div class="fHeaderHead">
                        <div style="background:#ddf">*!*header 1*/!*</div>
*/!*
                        *!*header 1*/!*
                    </div>
                1
                </td>


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

Сейчас посмотрю, что будет с отображением, когда появятся ячейки с rowspan и colspan
Ответить с цитированием
  #20 (permalink)  
Старый 05.03.2011, 00:02
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,625

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 21:33
ширина столбцов таблицы после загрузки bis Events/DOM/Window 1 26.03.2010 17:35
смена фоновой картинки у таблицы cuberboy Общие вопросы Javascript 0 15.10.2009 22:06
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 00:28
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 19.12.2008 23:35