Feste Spaltenüberschriften
Kai
- html
Hallo,
kann man irgendwie einstellen, dass es feste Spaltenüberschriften in Tabellen gibt? Bisher ist es nämlich so, ist der Text doch länger als die Spaltenbreite, macht er die Spalte einfach breiter, frag mich für was ich dann eine Breite angebe. Oder gibt es da eine Angabe, die ich machen könnte?
Das Problem ist, ich möchte eine fixierte Zeile mit den Spaltenüberschriften. was ich bisher gesehen habe, muss ich dann die Spaltenüberschriften in eine Tabelle packen und den Rest der Tabelle in eine andere, dadurch sind die Überschriften ja unabhängig von den Inhalten der Tabelle und die Spaltenbreiten passen nicht mehr zueinander v.a. wenn man nicht weiß wie breit die Zelle wirklich sein muss (richtet sich ja nach dem Zelleninhalt). vielleicht wisst ihr ja eine andere Lösung, wo ich keine 2 Tabellen brauche oder eine Möglichkeit die Spaltenbreite zu fixieren
Bin echt ratlos :(
LG Kai
kann man irgendwie einstellen, dass es feste Spaltenüberschriften in Tabellen gibt?
Ja
Bisher ist es nämlich so, ist der Text doch länger als die Spaltenbreite, macht er die Spalte einfach breiter, frag mich für was ich dann eine Breite angebe. Oder gibt es da eine Angabe, die ich machen könnte?
Was hast du bisher versucht?
Eventuell einen Ausschnitt deiner Tabelle von <table> bis zum ersten </tr> mit zugehörigem CSS posten.
mfg Beat
Danke schonmal für eure Antworten :)
Also das Problem ist, dass man nie weiß, ob nicht vielleicht doch ein besonders langes Wort dabei ist, das keine Whitespaces enthält. Hier mal mein Test für die festen Spaltenüberschriften, vielleicht habt ihr ja auch einen Tipp, wie ich das besser machen könnte, weil so ist ja die Überschrift von dem Inhalt der Tabelle unabhängig und die Spaltenbreiten passen nicht wirklich zueinander!
<HTML>
<HEAD><TITLE>SYSTEM</TITLE></HEAD>
<BODY>
<TABLE STYLE=" border-style:ridge; margin-top:4px;margin-bottom:8px;" WIDTH="94%" id="" ID="" BORDER="" CELLSPACING="" CELLPADING="" FRAME="" RULES="">
<CAPTION STYLE="margin-bottom:6px;margin-top:8pt;font-weight:bold;"></CAPTION>
<COLGROUP ALIGN="" VALIGN="" CHAR="" SPAN="" WIDTH="">
<COL ALIGN="" VALIGN="" WIDTH="3%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="20%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="11%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="12%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="3%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="6%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="9%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="10%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
</COLGROUP>
<THEAD style="font-weight:bold;background-color:#eaeaa5;" ALIGN="" VALIGN="">
<TR STYLE="background-color:#eeeeee;" id="" name="">
<TD valign="top" id="" align="" rowspan="" colspan="">ZO</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">DNI</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">ArtikelKurzbezeichnung</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">Projektbezeichnung</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">Versorgungsnummer</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">DQL</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">ABC</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">LNC</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">USU1</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">Abmessungen</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">UWU1</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">Gewicht</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">Teilekennzeichen</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">FCM</TD>
</TR>
</THEAD>
</TABLE>
<div style="width:95%; height:50%; overflow:auto;">
<TABLE STYLE=" border-style:ridge; margin-top:4px;margin-bottom:8px;" WIDTH="100%" id="" ID="" BORDER="" CELLSPACING="" CELLPADING="" FRAME="" RULES="">
<COLGROUP ALIGN="" VALIGN="" CHAR="" SPAN="" WIDTH="">
<COL ALIGN="" VALIGN="" WIDTH="3%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="20%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="11%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="12%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="3%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="6%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="9%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="center" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="5%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="10%" CHAR="" CHAROFF="" SPAN="" />
<COL ALIGN="" VALIGN="" WIDTH="4%" CHAR="" CHAROFF="" SPAN="" />
</COLGROUP>
<TBODY STYLE="background-color:#eeeeee;" ALIGN="" VALIGN="" CHAR="" CHAROFF="" SPAN="">
<TR STYLE="background-color:#eeeeee;" id="zo0" name="">
<TD valign="top" id="" align="" rowspan="" colspan="">0</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">1</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">FAHRZEUG</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">n.v.</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">1234-12-355-0383</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">0</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">AE</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">D91</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">n.v.</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">n.v.</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">n.v.</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">n.v.</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">A1Z12345678</TD>
<TD valign="top" id="" align="" rowspan="" colspan="">C1234</TD>
</TR>
<!-- Es folgen viele weitere TR -->
</TBODY>
</table>
</div>
</basefont></BODY>
</HTML>
Gruß Kai
Also das Problem ist, dass man nie weiß, ob nicht vielleicht doch ein besonders langes Wort dabei ist, das keine Whitespaces enthält. Hier mal mein Test für die festen Spaltenüberschriften, vielleicht habt ihr ja auch einen Tipp, wie ich das besser machen könnte, weil so ist ja die Überschrift von dem Inhalt der Tabelle unabhängig und die Spaltenbreiten passen nicht wirklich zueinander!
Es ist mir nicht klar, warum du
-- Die tabellen trennst
-- kein th element verwendest
-- nicht konsequent mit CSS arbeitest
-- ein gloabales dt, th{vertical-align:top} vermeidest.
-- keine Doctype verwendest
-- < /> pseudo XHTML schreibst (XHTML meidest du besser)
-- leere id="" ID="", SPAN="" schreibst
-- Gross/Kleischreibung mischt
-- ...
mfg Beat
Hallo Beat,
danke für deine schnelle Antwort :)
Es ist mir nicht klar, warum du
-- Die tabellen trennst
das habe ich nur gemacht, weil ichs anders nicht hinbekommen habe, dass die Überschriften stehen bleiben :( geht das denn anders?
-- kein th element verwendest
Ganz ehrlich ich habe das nicht selbst programmiert, sondern darf jetz an dem bisherig Vorhandem Veränderungen vornehmen. ist es denn wichtig th zu verwenden?
-- nicht konsequent mit CSS arbeitest
wie meinst du das? Sorry wenn ich vielleicht bisschen doof frage
-- ein gloabales dt, th{vertical-align:top} vermeidest.
globales dt? stehe grad glaub irgendwie aufm schlauch
-- keine Doctype verwendest
-- < /> pseudo XHTML schreibst (XHTML meidest du besser)
auf welche Elemente beziehst du das?
-- leere id="" ID="", SPAN="" schreibst
gut das hab ich mir auch schon gedacht, dass man das weglassen könnte (wie gesagt nur eine WEiterentwicklung von einem Kollegen)
-- Gross/Kleischreibung mischt
stimmt sollte man wirklich aufpassen
-- ...
mfg Beat
Gruß Kai
Es ist mir nicht klar, warum du
-- Die tabellen trennst
das habe ich nur gemacht, weil ichs anders nicht hinbekommen habe, dass die Überschriften stehen bleiben :( geht das denn anders?
Ja.
-- kein th element verwendest
Ganz ehrlich ich habe das nicht selbst programmiert, sondern darf jetz an dem bisherig Vorhandem Veränderungen vornehmen. ist es denn wichtig th zu verwenden?
Du schenkst dir einen Selektor um Spaltenüberschriften mit CSS auf einfache Weise anzusprechen und von <td> Elementen unterschiedlich zu formatieren.
-- nicht konsequent mit CSS arbeitest
wie meinst du das? Sorry wenn ich vielleicht bisschen doof frage
Für viele Attribute gibt es CSS Äquivalente, welche aber den Vorzug geniessen, dass man sie zentral verwalten und auch nur einmal verwenden muss
-- ein gloabales dt, th{vertical-align:top} vermeidest.
globales dt? stehe grad glaub irgendwie aufm schlauch
<td> war gemeint
im CSS
zum Beispiel td, th {vertical-align:top}
Das erspart dir alle VALIGN Attribute.
-- keine Doctype verwendest
-- < /> pseudo XHTML schreibst (XHTML meidest du besser)
auf welche Elemente beziehst du das?
Auf das Ende deiner Tags, die abgeschlossen sind, als ob XHTML vorläge
mfg Beat
Es ist mir nicht klar, warum du
-- Die tabellen trennst
das habe ich nur gemacht, weil ichs anders nicht hinbekommen habe, dass die Überschriften stehen bleiben :( geht das denn anders?Ja.
Wie geht das denn? ich habe bisher keine andere Lösung gefunden
-- kein th element verwendest
Ganz ehrlich ich habe das nicht selbst programmiert, sondern darf jetz an dem bisherig Vorhandem Veränderungen vornehmen. ist es denn wichtig th zu verwenden?Du schenkst dir einen Selektor um Spaltenüberschriften mit CSS auf einfache Weise anzusprechen und von <td> Elementen unterschiedlich zu formatieren.
Gut das werd ich auf jeden Fall ändern - danke
-- nicht konsequent mit CSS arbeitest
wie meinst du das? Sorry wenn ich vielleicht bisschen doof frage
Für viele Attribute gibt es CSS Äquivalente, welche aber den Vorzug geniessen, dass man sie zentral verwalten und auch nur einmal verwenden muss
achso - hört sich gut an
-- ein gloabales dt, th{vertical-align:top} vermeidest.
globales dt? stehe grad glaub irgendwie aufm schlauch<td> war gemeint
im CSS
zum Beispiel td, th {vertical-align:top}
Das erspart dir alle VALIGN Attribute.
da hätte ich auch selbst drauf kommen können ;) werd ich ändern
-- keine Doctype verwendest
-- < /> pseudo XHTML schreibst (XHTML meidest du besser)
auf welche Elemente beziehst du das?Auf das Ende deiner Tags, die abgeschlossen sind, als ob XHTML vorläge
dachte das wäre bei HTML so erlaubt, werd ich natürlich auch ändern
mfg Beat
Nur besteht weiterhin mein großes Problem mit den festen Spaltenüberschriften. hoffe du kannst mir da bissl weiterhelfen
Schon mal vielen Dank bisher :)
Gruß Kai
Nur besteht weiterhin mein großes Problem mit den festen Spaltenüberschriften. hoffe du kannst mir da bissl weiterhelfen
Wenn du das Missverhältnis langer Überschriften zu kurzem Data hast, dann schreibe nur eine Abkürzung als Überschrift. nimm dazu das Element
<abbr titel="Abkürzung">Abk.</abbr>
Es wird dann beim hovern über der Abkürzung im Tooltip der Titel sichtbar.
mfg Beat
Das ist natürlich ein guter Tipp - danke :) Aber eigentlich suche ich etwas anderes. Wenn man eine lange Tabelle hat, sollen die Spaltenüberschriften beim Scrollen stehen bleiben. Ich hoffe Ihr versteht, was ich meine!
Gruß Kai
Das ist natürlich ein guter Tipp - danke :) Aber eigentlich suche ich etwas anderes. Wenn man eine lange Tabelle hat, sollen die Spaltenüberschriften beim Scrollen stehen bleiben. Ich hoffe Ihr versteht, was ich meine!
Ich habe noch den verdacht gehabt, dass du so etwas wie "fixiert" statt "fest" meinen könntest.
Und, was haben deine Experimente bezüglich <tr style="position:fixed"> für die Zeile mit der Spaltenüberschrift erbracht?
(Das <table> Element sollte dabei position:relative aufweisen.)
mfg Beat
Ja genau fixierte meinte ich ;-) Sorry hätte mich wohl bisschen besser ausdrücken sollen
also habe das mal versucht, aber hat leider nicht geklappt - vielleicht findest du ja meinen Fehler
<html>
<head><title>SYSTEM</title></head>
<body>
<table style="position:relative;border-style:ridge; margin-top:4px;margin-bottom:8px;" width="95%">
<caption style="margin-bottom:6px;margin-top:8pt;font-weight:bold;"></caption>
<colgroup>
<col align="center" width="3%"></col>
<col align="center" width="4%"></col>
<col align="center" width="20%"></col>
<col align="center" width="11%"></col>
<col align="center" width="12%"></col>
<col align="center" width="4%"></col>
<col align="center" width="3%"></col>
<col align="center" width="6%"></col>
<col align="center" width="5%"></col>
<col align="center" width="9%"></col>
<col align="center" width="5%"></col>
<col align="center" width="5%"></col>
<col align="center" width="10%"></col>
<col align="center" width="4%"></col>
</colgroup>
<thead style="font-weight:bold;background-color:#eaeaa5;">
<tr style="position:fixed;background-color:#eeeeee;">
<th valign="top">ZO</th>
<th valign="top">DNI</th>
<th valign="top">ArtikelKurzbezeichnung</th>
<th valign="top">Projektbezeichnung</th>
<th valign="top">Versorgungsnummer</th>
<th valign="top">DQL</th>
<th valign="top">ABC</th>
<th valign="top">LNC</th>
<th valign="top">USU1</th>
<th valign="top">Abmessungen</th>
<th valign="top">UWU1</th>
<th valign="top">Gewicht</th>
<th valign="top">Teilekennzeichen</th>
<th valign="top">FCM</th>
</tr>
</thead>
<tbody style="background-color:#eeeeee;">
<tr style="background-color:#eeeeee;" id="zo0">
<td valign="top">0</td>
<td valign="top">1</td>
<td valign="top">Fahrzeug</td>
<td valign="top">n.v.</td>
<td valign="top">1234-12-355-0383</td>
<td valign="top">0</td>
<td valign="top">AE</td>
<td valign="top">D91</td>
<td valign="top">n.v.</td>
<td valign="top">n.v.</td>
<td valign="top">n.v.</td>
<td valign="top">n.v.</td>
<td valign="top">A1Z12345678</td>
<td valign="top">C1234</td>
</tr>
<!-- hier fehlen einige tr-Elemente-->
</tbody>
</table>
</body>
</html>
Gruß
Kai
also habe das mal versucht, aber hat leider nicht geklappt - vielleicht findest du ja meinen Fehler
Und was heisst: nicht geklappt?
Ich sehe vor allem, dass meine Hinweise bezüglich <abbr> und vertical-align im Code verworfen wurden.
Kannst du einen geeigneten Doctype angeben?
Auf welchem Browser testest du?
Ich habe mit Absicht "Experiment" gesagt.
Der Code, den du hier postest, taugt nicht für ein "Experiment".
Ich weiss nicht, auf welchem Sample du arbeitest.
Ein Test hätte zu folgender Erkenntnis führen müssen:
position fixed auf spezielle <tr> Reihe:
Das Element wird relativ zu einem Eleternelement fixiert.
Aber: Müsste eine Tabelle horizontal gescrollt werden, dann würde die Überschriften-Reihe dennoch horizontal fixiert bleiben. Das wäre unerwünscht.
position:fixed ist nicht tauglich, ein Element nur in einer Achse zu fixieren.
Es ist in CSS überhaupt nicht möglich, solches zu erreichen.
Damit stossen wir mit CSS ans Ende der Möglichkeiten und müssen, wenn wir die Funktionalität wünschten, Javascript bemühen (welches nicht überall immer aktiviert ist).
mfg Beat
Ich sehe vor allem, dass meine Hinweise bezüglich <abbr> und vertical-align im Code verworfen wurden.
So weit bin ich leider noch nicht gekommen. sorry!
Kannst du einen geeigneten Doctype angeben?
Normalerweise haben wir xml-Dateien und die werden zur Laufzeit über xsl angezeigt. Nur so kann ich schlecht testen, daher habe ich das jetz mal kurz in ein html zusammenkopiert, so wie es bei uns aussehen würde. im xsl verwenden wir <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">. wobei du wahrscheinlich etwas anderes gemeint hast?!
Auf welchem Browser testest du?
Ich teste auf Internet Explorer 6.0 - bei Mozilla hab ich immerhin gesehen, dass die Zeile stehen geblieben ist, aber es muss unter Internet Explorer laufen
Der Code, den du hier postest, taugt nicht für ein "Experiment".
Wieso taugt der nicht?
Ich weiss nicht, auf welchem Sample du arbeitest.
Sample?
position:fixed ist nicht tauglich, ein Element nur in einer Achse zu fixieren.
Es ist in CSS überhaupt nicht möglich, solches zu erreichen.
Damit stossen wir mit CSS ans Ende der Möglichkeiten und müssen, wenn wir die Funktionalität wünschten, Javascript bemühen (welches nicht überall immer aktiviert ist).
Javascript wird bei uns eh verwendet, d.h. wenn es hierüber eine Möglichkeit gäbe, wäre das super! Nur kann ich mir bisher nicht vorstellen, wie :(
LG Kai
Auf welchem Browser testest du?
Ich teste auf Internet Explorer 6.0 - bei Mozilla hab ich immerhin gesehen, dass die Zeile stehen geblieben ist, aber es muss unter Internet Explorer laufen
Ok, das ist wesentliche Informationn. MSIE6 ist mir nicht verfügbar.
Der Code, den du hier postest, taugt nicht für ein "Experiment".
Wieso taugt der nicht?
Ich weiss nicht, auf welchem Sample du arbeitest.
Sample?
Sample = Probe = Beispielcode
position:fixed ist nicht tauglich, ein Element nur in einer Achse zu fixieren.
Es ist in CSS überhaupt nicht möglich, solches zu erreichen.
Damit stossen wir mit CSS ans Ende der Möglichkeiten und müssen, wenn wir die Funktionalität wünschten, Javascript bemühen (welches nicht überall immer aktiviert ist).Javascript wird bei uns eh verwendet, d.h. wenn es hierüber eine Möglichkeit gäbe, wäre das super! Nur kann ich mir bisher nicht vorstellen, wie :(
Wir kommen dabei mit position:absolute aus, das wir als CSS setzen können.
(damit kommt MSIE6 zurecht)
Die idee wäre, je nach Scrolllzustand den Wert top für die absolut positionierte Zeile zu korrigieren.
Ein Eventlistener muss dabei an das <table> Element gehängt werden. Jetzt ist nur die Frage, welcher. Wenn gescrollt wird, bewegt sich in der Regel die Maus. onmousemove dürfte der richtige Handler sein
<table id=t1>
<tr id=t1h>...
und dann eine init Funktion
function init(){
var t1h document.getElementById('t1h');
document.getElementById('t1').onmousemove = function(){
//1. ermittle, wie weit vertikal gescrollt wurde
//2. setze t1h.style.top auf den ermittelten Wert
}
}
Mal nur als schneller Ansatz
mfg Beat
Hallo.
Javascript wird bei uns eh verwendet, d.h. wenn es hierüber eine Möglichkeit gäbe, wäre das super! Nur kann ich mir bisher nicht vorstellen, wie :(
So.
MfG, at
Hallo
Javascript wird bei uns eh verwendet, d.h. wenn es hierüber eine Möglichkeit gäbe, wäre das super! Nur kann ich mir bisher nicht vorstellen, wie :(
Das Prinzip geht auch mit (fast) beliebigen anderen Tabellen.
Auf Wiederlesen
Detlef
Hallo,
kann man irgendwie einstellen, dass es feste Spaltenüberschriften in Tabellen gibt? Bisher ist es nämlich so, ist der Text doch länger als die Spaltenbreite, macht er die Spalte einfach breiter, frag mich für was ich dann eine Breite angebe. Oder gibt es da eine Angabe, die ich machen könnte?
Zeig mal den Quellcode der Tabelle mit css. Dann kann man mehr sagen, aber grundsätzlich werden Zeilen nicht breiter, wenn man ihnen eine feste breite angibt. Dann bricht der Text einfach um und die Zeile wird höher, aber nicht breiter, es sei denn du hast keine whitespaces in einem Wort wie:
dlaskjfhljkasdhflkjsdhflkjsdhalfkhaskhfkhlasdhfjk
Grüße,
Hallo,
kann man irgendwie einstellen, dass es feste Spaltenüberschriften in Tabellen gibt? Bisher ist es nämlich so, ist der Text doch länger als die Spaltenbreite, macht er die Spalte einfach breiter,
das könnte zutreffen wenn du ein ienzelnes langes wort eingibst- gib der tabelle eine möglichkeit zum umbruch - ein leerzeichen zB.
MFG
bleicher