PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [HTML] Tabelle - Kopf(zeile) fest - Test scrollbar


TheDoctor46
13.06.2006, 08:04
Hallo,

hab mal eine Frage, und zwar ist es möglich das in einer Tabelle (HTML) der Kopf fest gemacht wird und der Rest scrollbar gemacht werden kann ?

http://de.selfhtml.org/html/tabellen/kategorien.png

Hier sollte nun die obere Zeile (Speisen, Hotel, ...) fest stehen.
Hoffi
13.06.2006, 08:39
Du gibt es mehrere Möglichkeiten. Nur fällt mir keine ein, wo das ganze eine Tabelle bleibt. Und wenn man die Tabelle in den Header und die Zellen aufteilt kann es vorkommen das die Spalten unterschiedlich breit werden.

Methode 1:
Header bauen und darunter ein iFrame setzen in dem der Inhalt angezeigt wird.

Methode 2:
Einen Container bauen der eine feste Höhe hat und der Inhalt Scrollbar ist.

Aber jedesmal steht der Header der Tabelle ausserhalb des Datenbereiches.
TheDoctor46
13.06.2006, 08:51
Die 1. Möglichkeit kenne ich, könntest du mir vielleicht mal die 2. erklären DANKE !
StGaensler
14.06.2006, 18:51
Ja, das ist mit CSS überhaupt kein Problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>scrollable table</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
table {border:1px black solid; }
table thead {background:#ccc; }
table tbody {height:20ex; overflow:scroll;}
table td {text-align:center; border:1px black solid; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Server</th>
<th>Feature Score</th>
<th>License</th>
<th>Platforms</th>
</tr>
</thead>
<tbody>
<tr>
<td><a title="Click here to go to the Antepo OPN website" href="AntepoOPN.shtml">Antepo OPN</a></td>
<td>88%</td>
<td>Proprietary</td>
<td>AIX, HP-UX, Linux, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the ejabberd website" href="ejabberd.shtml">ejabberd</a></td>
<td>91%</td>
<td>GPL</td>
<td>AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Jabber XCP website" href="JabberXCP.shtml">Jabber XCP</a></td>
<td>97%</td>
<td>Proprietary</td>
<td>Linux, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the jabberd 1.x website" href="jabberd1x.shtml">jabberd 1.x</a></td>
<td>45%</td>
<td>GPL</td>
<td>AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the jabberd 2.x website" href="jabberd2x.shtml">jabberd 2.x</a></td>
<td>76%</td>
<td>GPL</td>
<td>AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Merak website" href="Merak.shtml">Merak</a></td>
<td>76%</td>
<td>Proprietary</td>
<td>Linux, Windows</td>
</tr>
<tr>
<td>
<a title="Click here to go to the OpenIM website" href="OpenIM.shtml">OpenIM</a></td>
<td>48%</td>
<td>BSD</td>
<td>AIX, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the psyced website" href="psyced.shtml">psyced</a></td>
<td>59%</td>
<td>GPL</td>
<td>AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr><td><a title="Click here to go to the SoapBox Server website" href="SoapBoxServer.shtml">SoapBox Server</a></td>
<td>78%</td>
<td>Proprietary</td>
<td>Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Sun Java System Instant Messaging website" href="SunJavaSystemInstantMessaging.shtml">Sun Java System Instant Messaging</a></td>
<td>67%</td>
<td>Proprietary</td>
<td>HP-UX, Linux, Solaris, Windows</td>
</tr><tr>
<td><a title="Click here to go to the TIMP.NET website" href="TIMPNET.shtml">TIMP.NET</a></td>
<td>76%</td>
<td>Proprietary</td>
<td>Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Wildfire website" href="Wildfire.shtml">Wildfire</a></td>
<td>98%</td>
<td>GPL or Proprietary</td>
<td>AIX, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the xmppd.py website" href="xmppdpy.shtml">xmppd.py</a></td>
<td>21%</td>
<td>GPL</td>
<td>Linux</td>
</tr>
</tbody>
</table>
</body>
</html>Es stören nur die Scrollbalken ein wenig :D

4489
Viele Grüße,
Stefan
TheDoctor46
15.06.2006, 07:50
Juuuhuuu

danke Stefan :cool:
StGaensler
15.06.2006, 09:45
Ich habe noch ein wenig gespielt :D
Mit ein paar Tricks kann man sogar den horizontalen Scrollbalken überflüssig machen:
4494Die Eigenschaften "overflow-x" und "overflow-y" gehören aber leider erst zum CSS 3 Standard.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>scrollable table</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<style type="text/css">
table {border:1px black solid; }
table thead {background:#ccc; }
table td.last { padding-right:15px; }
table tbody {height:20ex; overflow-y:scroll; overflow-x:hidden; }
table td {text-align:center; border:1px black solid; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Server</th>
<th>Feature Score</th>
<th>License</th>
<th>Platforms</th>
</tr>
</thead>
<tbody>
<tr>
<td><a title="Click here to go to the Antepo OPN website" href="AntepoOPN.shtml">Antepo OPN</a></td>
<td>88%</td>
<td>Proprietary</td>
<td class="last">AIX, HP-UX, Linux, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the ejabberd website" href="ejabberd.shtml">ejabberd</a></td>
<td>91%</td>
<td>GPL</td>
<td class="last">AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Jabber XCP website" href="JabberXCP.shtml">Jabber XCP</a></td>
<td>97%</td>
<td>Proprietary</td>
<td class="last">Linux, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the jabberd 1.x website" href="jabberd1x.shtml">jabberd 1.x</a></td>
<td>45%</td>
<td>GPL</td>
<td class="last">AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the jabberd 2.x website" href="jabberd2x.shtml">jabberd 2.x</a></td>
<td>76%</td>
<td>GPL</td>
<td class="last">AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Merak website" href="Merak.shtml">Merak</a></td>
<td>76%</td>
<td>Proprietary</td>
<td class="last">Linux, Windows</td>
</tr>
<tr>
<td>
<a title="Click here to go to the OpenIM website" href="OpenIM.shtml">OpenIM</a></td>
<td>48%</td>
<td>BSD</td>
<td class="last">AIX, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the psyced website" href="psyced.shtml">psyced</a></td>
<td>59%</td>
<td>GPL</td>
<td class="last">AIX, *BSD, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr><td><a title="Click here to go to the SoapBox Server website" href="SoapBoxServer.shtml">SoapBox Server</a></td>
<td>78%</td>
<td>Proprietary</td>
<td class="last">Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Sun Java System Instant Messaging website" href="SunJavaSystemInstantMessaging.shtml">Sun Java System Instant Messaging</a></td>
<td>67%</td>
<td>Proprietary</td>
<td class="last">HP-UX, Linux, Solaris, Windows</td>
</tr><tr>
<td><a title="Click here to go to the TIMP.NET website" href="TIMPNET.shtml">TIMP.NET</a></td>
<td>76%</td>
<td>Proprietary</td>
<td class="last">Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the Wildfire website" href="Wildfire.shtml">Wildfire</a></td>
<td>98%</td>
<td>GPL or Proprietary</td>
<td class="last">AIX, HP-UX, Linux, MacOS X, Solaris, Windows</td>
</tr>
<tr>
<td><a title="Click here to go to the xmppd.py website" href="xmppdpy.shtml">xmppd.py</a></td>
<td>21%</td>
<td>GPL</td>
<td class="last">Linux</td>
</tr>
</tbody>
</table>
</body>
</html>
Viele Grüße,
Stefan
TheDoctor46
15.06.2006, 10:46
... wenn man den IE zum aufrufen der Site benutz kommt folgendes...

4495
StGaensler
15.06.2006, 10:53
Ja, das habe ich dir per PN ja auch schon geschrieben:
[...]
Jede Tabellenzeile ist hier die 20ex hoch (so groß, wie eigentlich der Tabellenbereich sein sollte). Eine etwas ältere Version von Opera stellt mir die Tabelle einfach "normal" dar - eine aktuelle Version habe ich leider nicht zum testen da.

Wahrscheinlich ist eine Browserweiche die beste Lösung...
[...]Dafür, dass sich der IE nicht an die Standards hält, kann ich leider auch nichts...
Ich definiere die Höhe eindeutig für das <tbody>-Element, und die Höhe wird (laut CSS-Spezifikationen) nicht weitervererbt - der IE vererbt sie aber an die <td>-Elemente weiter, was komplett sinnlos ist.

Aber das ist nicht der einzigste Bug von IE...

Viele Güße,
Stefan
TheDoctor46
15.06.2006, 10:58
kann man das umgehen ?

scheiß MS-IE :mad:
StGaensler
15.06.2006, 11:15
Nur insofern, dass den IE-Nutzern dann der Komfort einer scrollbaren Tabelle vorenthalten bleibt:
</style>
<!--[if IE]>
<style type="text/css">
table td.last {padding-right:0; }
table tbody {height:auto; }
</style>
<![endif]-->
</head>Die oben genannten Lösungen wären auch noch möglich, aber die sind alle nicht barrierefrei.

Viele Grüße,
Stefan
Hoffi
15.06.2006, 11:16
Ich hab grad mal versucht der td eine eigene Höhe zu geben. Mein IE ignoriert das auch. Leider.