Tabellenspaltenbreiten turboschnell anpassen

[Hans]

Hallo !

Also: Eine angezeigte Tabelle besteht in Wirklichkeit aus zwei Tabellen.
Tabelle1 beinhaltet den Header
Tabelle2 beinhaltet die Daten, befindet sich in einem DIV mit overflow-kram, sodaß ein Scrollbar erscheint.

Jetzt sind die Spalten natürlich unterschiedlich breit. Wenn ich die Header-Spalte x so breit mache wie die Datenspalte x, muß ich natürlich auch die Breite der ganzen Tabelle vergoessern. Dann verschiebt es mir die Header-Spalten a,b,c etc. Wenn ich die wiederum anpasse, dann verschiebt's wieder woanders, solange bis dieses sch...-Teil einmal alle Spalten so macht, wie ich es brauche.

Gibt es irgendwie einen Trick "document.getElementById(Header_spalte).style.width=document.getElementById(Daten_spalte).width.basta ;-)

Gruß

Hans

[Tim Tepaße]

Hallo Hans,

Dann verschiebt es mir... Wenn ich die wiederum anpasse, dann verschiebt's wieder woanders, ...

Klingt nervig. Ich würde an einer anderen Stelle anfangen, nämlich im HTML-Quellcode:

Also: Eine angezeigte Tabelle besteht in Wirklichkeit aus zwei Tabellen.
Tabelle1 beinhaltet den Header
Tabelle2 beinhaltet die Daten

Sind zwei Tabellen denn unbedingt nötig? Mal abgesehen davon, daß es auch logisch nicht wirklich konsistent ist.

Wenn es sich bei Deinem Header nicht irgendwie ein seitengestalterisches Element handelt, dann würde ich dafür sowieso das Element th verwenden. Dir ist natürlich aus irgendwelchen Gründen der overflow-Effekt wichtig. Aber auch dafür gibt es bei geeigneter Strukturierung der Tabelle eine Lösung. Man kann eine Tabelle mit den Elementen thead, tbody und tfoot in Bereiche unterteilen, die man dann entsprechend mit CSS formatieren kann. Deine Tabelle sähe bei mir dann so aus:

<table>  
  <thead>  
    <tr><th>Überschrift 1</th><th>Überschrift 2</th></tr>  
  </thead>  
  <tbody>  
    <tr><td>Daten</td><td>Daten</td></tr>  
    <tr><td>Daten</td><td>Daten</td></tr>  
    <tr><td>Daten</td><td>Daten</td></tr>  
  </tbody>  
</table>

Du müßtest overflow dann entsprechend auf das tbody-Element anwenden, um Scrollbalken zu erhalten.

Tim

[Gernot Back]

Hallo Tim,

Deine Tabelle sähe bei mir dann so aus:

<table>

<thead>
    <tr><th>Überschrift 1</th><th>Überschrift 2</th></tr>
  </thead>
  <tbody>
    <tr><td>Daten</td><td>Daten</td></tr>
    <tr><td>Daten</td><td>Daten</td></tr>
    <tr><td>Daten</td><td>Daten</td></tr>
  </tbody>
</table>

  

> Du müßtest overflow dann entsprechend auf das tbody-Element anwenden, um Scrollbalken zu erhalten.  
  
Also bei mir funktioniert deine Lösung unter Win 98 ansatzweise nur in Mozilla 1.7.2 und Netscape 7.1, allerdings mit dem seltsamen Effekt, dass die Tabellen-Inhalte über die Tabellenbegrenzungslinien hinwegscrollen. In Opera 7.54 scrollt der definierte TBODY-Bereich genausowenig wie in IE6. Schlimmer noch: in leterem Browser wird jede einzelne Tabellenzeile so hoch dargestellt wie die Höhenangabe, die eigentlich für den gesamten TBODY-Bereich gedacht ist.  
  
Der Theorie nach sollte es so gehen, wie du sagst, tut es aber leider nicht.  
  
Vielleicht sucht Hans ja nach einer Lösung wie ich sie hier beschrieben habe:  
  
<http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/index.htm>  
  
Manchmal sind Frames halt doch die bessere Lösung bisher.  
  
Gruß Gernot

[Tim Tepaße]

Hallo Gernot,

Der Theorie nach sollte es so gehen, wie du sagst, tut es aber leider nicht.

Autsch. Hier zeigt sich mal wieder, weswegen man seine Lösungsvorschläge ausführlich testen sollte. Danke.

Tim