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