Hi,
webspace hab ich leider keinen ...
Is aber echt kein Ding, so kompliziert is es echt nicht :)
Die Tatsache dass dein Beispiel nicht so aussieht wie ich meine liegt daran, dass ich natuerlich noch etwas mehr CSS drin habe, dachte nur dass es leichter zu verstehen sei als es offensichtlich ist.
Also hier mal ein Beispiel:
Es zeigt die Tabelle, die in 2 Teile geteilt ist (links, mitte). Ausserdem ist rechts noch ein Bereich der fuer was anderes gebraucht wird.
Die Idee ist, dass der mittlere Teil IMMER zu sehen ist, auch wenn links in der Tabelle oder recht in dem div (scrollt im Beispiel nicht), da dort die ID und der Name des jeweiligen Tabellen Eintrag zu lesen ist. Somit behaelt man immer den Ueberblick, auch wenn man schon 3km in der ersten Tabelle gescrollt hat.
Mein Problem ist nun lediglich, dass die gelben divs (resizer) nicht 100% gross sind, im Bezug auf den Container. Das haette ich gerne, am besten auch ohne das drin (was mir aber eher wurscht is).
Danke fuer die Hilfe!
Hier nun der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style>
tr
{
white-space:nowrap;
overflow:hidden;
height:20px;
}
th, td
{
white-space:nowrap;
overflow:hidden;
border:solid 1px black;
}
</style>
</head>
<body>
<div style="border: dashed 1px darkblue;">
<div class="scrollDiv" style="overflow:auto; float:left; width:15%;">
<table style="table-layout:fixed; margin-bottom:10px;">
<thead>
<tr>
<th>
Col1DATA
</th>
<th >
Col2DATA
</th>
<th >
Col3DATA
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
Col1DATA
</th>
<th>
Col2DATA
</th>
<th>
Col3DATA
</th>
</tr>
</tfoot>
<tbody style="overflow:scroll; max-height:350px;">
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
<tr>
<td>
Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData Col1DATAData
</td>
<td>
Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData Col2DATAData
</td>
<td>
Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData Col3DATAData
</td>
</tr>
</tbody>
</table>
</div>
<div class="resize" style="background:yellow; width:0.5%; float:left;">
</div>
<div class="scrollDiv" style="overflow:scroll; overflow-y:hidden; float:left; width:25%;">
<table style="table-layout:fixed; margin-bottom:10px;">
<thead>
<tr>
<th style="width:250px;">
Col1FIX
</th>
<th style="width:100px;">
Col2FIX
</th>
<th style="width:100px;">
Col3FIX
</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="width:250px;">
Col1FIX
</th>
<th>
Col2FIX
</th>
<th style="width:250px;">
Col3FIX
</th>
</tr>
</tfoot>
<tbody style="overflow:scroll; max-height:350px;">
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
<tr>
<td>
IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION IDENTIFIKATION
</td>
<td>
NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
</td>
<td>
REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ REFERENZ
</td>
</tr>
</tbody>
</table>
</div>
<div class="resize" style="background:yellow; width:0.5%; float:left;">
</div>
<div class="scrollDiv" style="overflow:scroll; overflow-y:hidden; float:left; width:58%;">
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
ANOTHER DIV
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>