Tabellen Überschrift Breite?

[hawkmaster]

Hallo zusammen,
ich versuche gerade eine Scrollbare Tabelle zu machen. Das wäre kein Problem.
Jetzt sollten nur die Überschriften genau mit den Spalten übereinstimmen von der Breite her. Ich habe versucht, die Überschriften der Spalten mit Divs zu machen die überhalb der Tabelle sind. Wie man sieht sind die Breitenangaben immer gleich. trotzdem stimmt es nicht genau überein.
Ich habe schon alles mögliche versucht. Im Internet findet man viele Beispiele mit zwei innereinanderliegende Tabellen.
Es scheitert aber immer an meinem Inhalt. Denn die Dateinamen können unter Umständen recht lang werden.
Bin wirklich für jede Idee dankbar.

  
<div class="TableHeadDivMain">  
<div style="width:50px;">Status </div>  
<div style="width:470px;">Datei</div>  
<div style="width:75px;">FileSize</div>  
<div style="width:200px;">FileDate</div>  
</div>  
<div style="clear:left"></div>	  
<div class="divstatus">  
<table class="tablestatus">  
<thead>  
<tr>  
<th style="width:50px;" scope="col"></th>  
<th style="width:470px;" scope="col"></th>  
<th style="width:75px;" scope="col"></th>  
<th style="width:200px;" scope="col"></th>  
</tr>  
</thead>  
<tfoot>  
<tr>  
<td colspan="4"></td>  
</tr>  
</tfoot>  
<tbody>  
<tr><td colspan="4"></td></tr>  
<tr><td>X</td><td>Dies~istmit~tilde.doc</td><td>34</td><td>09.11.2009 10:12:53</td></tr>  
<tr><td>X</td><td>DEUTSCH.doc</td><td>11</td><td>29.10.2009 8:28:36</td></tr>  
<tr class="dk"><td>X</td><td>Recht_Langen_Dateinamen_haben_wir_da.doc</td><td>1637</td><td>27.10.2009 12:58:33</td></tr>  
<tr><td>X</td><td>Das+ist~mit@sönderZüchenß&.doc</td><td>38</td><td>30.07.2009 14:53:40</td></tr>  
<tr><td>X</td><td>Dies ist eine Datei mit vielen Blanks zwischen den Wörten.doc</td><td>158</td><td>13.03.2009 12:26:43</td></tr>  
</tbody>  
</table>  
</div>  

  
.TableHeadDivMain div {  
  float:left;  
}  
.divstatus {height:10em; overflow:auto;width:770px; }  
.tablestatus {width:750px; border-collapse:collapse; table-layout:fixed }  
.tablestatus caption {background:#fff; color:#697210; font-size:1.2em; margin:0 auto;}  
.tablestatus th {text-align:left; padding-right:5px;}  
.tablestatus td {background:#eee; color:#000; padding-right:5px;}  
.tablestatus tr.dk td {background:#ddd; color:#000;}  
  

vielen Dank und viele Grüße
hawk

[ChrisB]

Hi,

Ich habe versucht, die Überschriften der Spalten mit Divs zu machen

Fühle dich bitte geschlagen dafür.
Und das so lange wiederholt, bis du es geändert hast.

Wie man sieht sind die Breitenangaben immer gleich. trotzdem stimmt es nicht genau überein.

Wenn du den Überschriften kein Padding gibst, den Tabellenzellen aber schon - dann darfst du dich darüber nicht wundern.

MfG ChrisB

[hawkmaster]

Hi Chris,

Fühle dich bitte geschlagen dafür.
Und das so lange wiederholt, bis du es geändert hast.

aua jetzt ist es genug: Aber ja du hast recht, diese Schläge habe ich verdient. Manchmal sieht man den Wald vor lauter Bäumen nicht.
Recht herzlichen Dank dafür.

Mal was anderes.
Würde es einen Sinn machen oder wäre es besser, solche Daten ganz mit CSS Spalten anzuzeigen? Eventuell mit UL un LI oder mit reinen DIVs nebeneinander?
Hätte das vielleicht Vorteile gegenüber einer Tabelle?.

vielen Dank und viele Grüße
hawk

[Gunnar Bittersmann]

@@hawkmaster:

nuqneH

Würde es einen Sinn machen oder wäre es besser, solche Daten ganz mit CSS Spalten anzuzeigen? Eventuell mit UL un LI oder mit reinen DIVs nebeneinander?
Hätte das vielleicht Vorteile gegenüber einer Tabelle?.

Was Cheatah sagte.

Qapla'

[hawkmaster]

Hallo
danke nochmals für Eure Hilfe.
Ok, bei tabellarischen Daten muss / soll man eine Tabelle nehmen.
Meine Problematik ist nun aber immer noch wie ursprünglich:

Die Divs als Überschriften haben die gleiche Breite wie die Spalten der Tabellen.
Ich habe nie immer den gleichen Inhalt. Es kann z.b. mal ein ganz langer Dateiname vorkommen.
Wenn jetzt angenommen wie im Besipielcode die Spalte 2 nur 300px bekommt, ist das ganze Layout wieder verschoben, weil sich offensichtlich die Spalte nach dem Inhalt richtet, trotz der Breitenangabe.

Wie könnte man dies breinigen?
Vorher aus der Datenbank (wo die Daten sind) den längsten String ermitteln und dann event. die Breite der Spalten automatisch anpassen?

  
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<style type="text/css">  
.TableHeadDivMain div {  
  float:left;  
}  
.divstatus {height:10em; overflow:auto;width:770px; }  
  
.tablestatus {width:750px; border-collapse:collapse; table-layout:fixed }  
.tablestatus caption {background:#fff; color:#697210; font-size:1.2em; margin:0 auto;}  
.tablestatus th {text-align:left; }  
.tablestatus td {background:#eee; color:#000; }  
.tablestatus tr.dk td {background:#ddd; color:#000;}  
</style>  
</head>  
  
<body>  
<div class="TableHeadDivMain">  
<div style="width:50px;">Status </div>  
<div style="width:300px;">Datei</div>  
<div style="width:75px;">FileSize</div>  
<div style="width:200px;">FileDate</div>  
</div>  
<div style="clear:left"></div>  
<div class="divstatus">  
<table class="tablestatus">  
<thead>  
<tr>  
<th style="width:50px;" scope="col"></th>  
<th style="width:300px;" scope="col"></th>  
<th style="width:75px;" scope="col"></th>  
<th style="width:200px;" scope="col"></th>  
</tr>  
</thead>  
<tfoot>  
<tr>  
<td colspan="4"></td>  
</tr>  
</tfoot>  
<tbody>  
<tr><td colspan="4"></td></tr>  
<tr><td>X</td><td>Dies~istmit~tilde.doc</td><td>34</td><td>09.11.2009 10:12:53</td></tr>  
<tr><td>X</td><td>DEUTSCH.doc</td><td>11</td><td>29.10.2009 8:28:36</td></tr>  
<tr class="dk"><td>X</td><td>Recht_Langen_Dateinamen_haben_wir_da.doc</td><td>1637</td><td>27.10.2009 12:58:33</td></tr>  
<tr><td>X</td><td>Das+ist~mit@sönderZüchenß&.doc</td><td>38</td><td>30.07.2009 14:53:40</td></tr>  
<tr><td>X</td><td>Dies ist eine Datei mit vielen Blanks zwischen den Wörten.doc</td><td>158</td><td>13.03.2009 12:26:43</td></tr>  
</tbody>  
</table>  
</div>  
</body>  
</html>  

vielen Dank und viele Grüße
hawk

[EKKi]

Mahlzeit hawkmaster,

Ok, bei tabellarischen Daten muss / soll man eine Tabelle nehmen.

Richtig. Deswegen ist auch nicht ganz klar, warum Du für *Tabellen*-Überschriften <div>-Elemente missbrauchst ...

Wenn jetzt angenommen wie im Besipielcode die Spalte 2 nur 300px bekommt, ist das ganze Layout wieder verschoben, weil sich offensichtlich die Spalte nach dem Inhalt richtet, trotz der Breitenangabe.

Dann sorge doch dafür, dass der Inhalt die Tabellenzelle (bzw. im Speziellen ihre Breite) nicht verändert. Ich würde dazu vorschlagen, einfach mal mit http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space@title=white-space und http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow herumzuspielen.

Vorher aus der Datenbank (wo die Daten sind) den längsten String ermitteln und dann event. die Breite der Spalten automatisch anpassen?

Und woher willst Du wissen, welche Auflösung, Schriftart und Zeichenbreite der Anwender hat? Userstylesheets (könnten) existieren.

MfG,
EKKi

[hawkmaster]

Hallo Ekki,
auch dir vielen Dank.

Richtig. Deswegen ist auch nicht ganz klar, warum Du für *Tabellen*-Überschriften <div>-Elemente missbrauchst ...

Da beginnen wir wieder ganz am Anfang meines Problems. Ich will / brauche eine scrollbare Tabelle damit das Aussehen des Fensters nicht total verschoben wird bzw. es immer gleich aussieht.
Wenn ich hier nun also mit normalen <th> als Spaltenüberschriften arbeite, laufen diese ja beim Scrollen mit.
Ich versuche mich nun an diesem Problem nun über zwei Wochen und habe alles mögliche versucht.
Im Netzt findet man viele Beispiele wo man zwei Tabellen ineinander verschachtelt und die äußere nur für die Spaltenüberschriften dient. Aber das klappt immer nur soweit, wenn die Texte in den Spalten immer schön gleich sind.

Dann sorge doch dafür, dass der Inhalt die Tabellenzelle (bzw. im Speziellen ihre Breite) nicht verändert.

Auch das habe ich schon versucht. Bzw. ich dachte mit "table-layout:fixed " erreicht man dies.

vielen Dank und viele Grüße
hawk