Forum PHP.pl > [xhtml] tabelka ze scrollem

FiDO

18.02.2004, 20:50:32

Chce sobie zrobic tabelke ze scrollem, ale tak, ze pierwszy wiersz (naglowek z nazwami kolumn) nie jest scrollowany (zawsze widoczny), a jedynie pozostale. Zalozenie jest takie, ze kazda kolumna ma z gory okreslony rozmiar (w pixelach). I teraz jak takie cos zrobic? :/

Jedyne co wymeczyłem to:
- zrobienie tabelki, która jest nagłówkiem (jednowierszowej) o tych zadanych szerokościach kolumn,
- pod spodem tabelka z danymi w div'ie (div ma styl "overflow: auto" co powoduje dodanie scrolla)

Niestety scroll jest wtedy dodawany na zewnatrz tabelki, co ja poszerza o iles tam pixeli (zalezy jak kto ma szerokosc scrolla ustawioną w systemie), a tabelka gorna (naglowek) ma byc szeroka tak jak ta dolna + szerokość scrolla... Zamieszalem?

Chodzi o coś takiego
Teraz mam ustawioną szerokość nagłówka na stałe, jak zmienie szerokość scrolla w systemie to już nie będzie działać, a chce zrobić to uniwersalnie (ma działać conajmniej na IE i Mozilli

)
Skrócenie nagłówka o szerokość scrolla nie widzi mi się specjalnie, bo jak widać lub nie... pod tabelką jest dodatkowa tabela z białym tłem i miałbym w rogu biały prostokąt.

gulldarek

19.02.2004, 08:36:30

Mam nadzieję, że dobrze cię zrozumiałem i o to chodzi.

Acha i nie zwracaj uwagi na brak znacząych elementów html'a bo robiłem to na szybko

[xml:1:7d4d6cb52a]<html>
<head>

<style type="text/css">

</style>

</head>

<div id="tableheader1">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#6780b8">
<tr height="1">
<td bgcolor="#4f556a" height="1" colspan="3"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td bgcolor="#4f556a" width="1"><img src="spacer.gif" width="1" height="1"></td>
<td>
<table width="604" border="0" cellpadding="0" cellspacing="0" align="left">
<tr height="19">
<TD nowrap></TD>
<td class="header" nowrap height="19">  Wyniki czegos tam, exclusive for FiDO</td>
<td class="header" width="100%" height="19"></td>
</tr>
</table>
</td>
<td bgcolor="#4f556a" width="1"><img src="spacer.gif" width="1" height="1"></td>
</tr>
<tr height="1">
<td bgcolor="#4f556a" height="1" colspan="3"><img src="spacer.gif" width="1" height="1"></td>
</tr>
</table>
</div>

<div id="columnheader1" style="width:600">
<table bgcolor="#4F556A" border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="table1" width="100" nowrap>  Pos</td>
<td class="table1" width="200" nowrap>  Nick</td>
<td class="table1" width="150" nowrap>  Punkty</td>
<td class="table1" width="135" nowrap>  Bilans</td>
<td class="table1"><img src="spacer.gif" width="15" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="tablebody1" style="overflow:auto; height:100; width:606; border-bottom-style:solid; border-bottom-color:#4F556A; border-bottom-width:1">
<table bgcolor="#4F556A" border=0 cellspacing=0 cellpadding=0>
<tr>
<td>
<table class="text" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="table5" width="100" nowrap>  1</td>
<td class="table5" width="200" nowrap>  gulldarek</td>
<td class="table5" width="150" nowrap>  999999999999</td>
<td class="table5" width="135" nowrap>  564565645646756</td>
</tr>
<tr>
<td class="table5" nowrap>  2</td>
<td class="table5" nowrap>  FiDO</td>
<td class="table5" nowrap>  999999999</td>
<td class="table5" nowrap>  564565645646</td>
</tr>
<tr>
<td class="table5" nowrap>  3</td>
<td class="table5" nowrap>  gulldi</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  4</td>
<td class="table5" nowrap>  itd.</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  5</td>
<td class="table5" nowrap>  itp.</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  6</td>
<td class="table5" nowrap>  etc.</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  7</td>
<td class="table5" nowrap>  cos</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  8</td>
<td class="table5" nowrap>  drugie cos</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  9</td>
<td class="table5" nowrap>  trzecie cos</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
<tr>
<td class="table5" nowrap>  10</td>
<td class="table5" nowrap>  ostatnie cos</td>
<td class="table5" nowrap>  999999</td>
<td class="table5" nowrap>  564565645</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</html>[/xml:1:7d4d6cb52a]

FiDO

19.02.2004, 13:34:39

Pieknie 8)
O to wlasnie mi chodzilo... zabieram sie za analize kodu ;]

gulldarek

19.02.2004, 14:39:29

Mam nadzieje, ze sie przydalo, a swoja droga ja tez z tego skorzystam

Dominik

19.02.2004, 14:48:57

Zgodnie ze standardami bedzie tak:
[xml:1:8ca385ab40]<table>
<thead>
<tr>
<td>a<td>
<td>b<td>
<td>c<td>
<td>d<td>
</tr>
</thead>

<tbody style="overflow: auto; height: 50px; border: 1px solid black">
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tr>
<td>1<td>
<td>2<td>
<td>3<td>
<td>4<td>
</tr>
<tbody>
</table>[/xml:1:8ca385ab40]

gulldarek

19.02.2004, 15:03:19

Nie wiem jak u FiDO ale u mnie to nie dziala....

Dominik

19.02.2004, 15:13:19

Cytat

Nie wiem jak u FiDO ale u mnie to nie dziala....

Powiedzialem zgodnie ze standardami a nie zgodnie z IE

To dziala na Gecko (Mozilla, Firefox, K-meleon, Galeon, NEtscape itp), chyba na Operze 7, na Konq (czyli rowniez na Safari).

Teodor

19.02.2004, 16:08:21

Cytat

Zgodnie ze standardami bedzie tak:
[xml:1:43377c3efa]<table>
<thead>
<tr>

[...]

<td>4<td>
</tr>
<tbody>
</table>[/xml:1:43377c3efa]

Wlasnie chcialem cos identycznego wrzucic

Dla IE moze byc cos takiego: -> demo http://quake2.org/temp/table_ie.html
[xml:1:43377c3efa]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-type" />
<meta content="pl" http-equiv="Content-Language" />
<style type="text/css">
body {
background-color: white;
margin: 0px;
padding: 0px;
}
#maindiv {
height: 200px;
width: 600px;
overflow: auto;
margin: 0px;
padding: 0px;
border: 0px;
}
td {
width: 150px;
background: silver;
border: 1px dashed white;
border-spacing: 0px;
}
table {
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
tr {
margin: 0px;
padding: 0px;
}
.tabmain {
width: 600px;
border: 0px;
}
</style>
<title>Tabelka w divie

</title>
</head>
<body>
<table class="tabmain" cellspacing="0">
<tr>
<td>H 1</td>
<td>H 2</td>
<td>H 3</td>
<td>H 4</td>
</tr>
<tr>
<td colspan="4">
<div id="maindiv">
<table class="tabmain" cellspacing="0">
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
<tr>
<td>POZ 1</td>
<td>POZ 2</td>
<td>POZ 3</td>
<td>POZ 4</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</body>
</html>[/xml:1:43377c3efa]

Pozdrawiam

FiDO

20.02.2004, 00:33:11

I tak tylko pierwsza odpowiedz zaspokoila moje potrzeby co do wygladu tej tabelki, a dostosowanie jej do xhtml'a to bylo pare minut