03.03.2011, 22:33
|
|
Интересующийся
|
|
Регистрация: 02.03.2011
Сообщений: 19
|
|
|
Последовал совету мудрого Каа, то есть Ksa. Отредактил пример, из трех столбцов сделал семь, примеру поплохело (синхронизации ширины заголовка столбца и ячейки столбца не стало). Жаль.
Вопрос остается открытым - как сделать фиксированный заголовок у таблицы, который бы не скроллился при большом количестве строк.
|
|
03.03.2011, 23:43
|
|
Интересующийся
|
|
Регистрация: 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 в 23:50.
|
|
04.03.2011, 02:59
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
Вот тебе велосипед, сляпаный мной только-что.)
Прост как лом, какие баги - говори.)
<!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 в 01:04.
|
|
04.03.2011, 09:05
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от ctocopok
|
|
Вопрос остается открытым - как сделать фиксированный заголовок у таблицы, который бы не скроллился при большом количестве строк.
|
Пока небудет от тебя путнего примера с твоими "сложными" и "многострочными" шапками таблиц ничего даже пробовать не стану... 
Но одну из идей уже показал Aetae (видать добрейшей души человек). 
Причем без всяких дисплэй блок... Без которого (с твоих слов ctocopok) ничего не будет работать... |
|
04.03.2011, 10:52
|
|
Интересующийся
|
|
Регистрация: 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>
|
|
04.03.2011, 11:00
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от ctocopok
|
|
можно по ссылкам
|
По ссылкам не хожу... Рассматриваю только тестовые примеры тут. |
|
04.03.2011, 11:36
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
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>
|
|
04.03.2011, 11:39
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
Упс... А работает-то на 100% только в ИЕ. 
В остальных браузерах нужно будет контролировать ширину колонок вложеными дивами... |
|
05.03.2011, 00:20
|
|
Интересующийся
|
|
Регистрация: 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
|
|
05.03.2011, 01:02
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
|
header продублирован, чтобы он также растягивал колонку в случае если он длиннее чем данные в ней.(Поправил пример для наглядности.)
От rowspan в header'e придётся отказаться, но в дивы можно запихнуть любые конструкции.
|
|
|
|
