Im FF bleibt die oberste Zeile einer Tabelle beim Scrollen stehen, im IE nicht.

TheRealSunmoon · 18. Januar 2007

Hallo liebe Community,

Ich habe da ein Problem mit meiner Tabelle.

Ich lese diverse Daten aus einer DB aus die ich dann in eine Tabelle schreiben lasse,
die Tabelle ändert also stats ihre Höhe.
Damit die Tabelle besser zu lesen ist, lasse ich die obere Zeile beim Scrollen stehen.
Im FF zumindest, im IE will das ums verrecken nicht funktionieren.

Hat jemand eine Idee für einen Workaround, dass ich diesen Komfort auch IE Nutzern
zukommen lassen kann?

Hier mal ein Beispiel ohne den PHP overhead.

Code:

<html>
<head><title></title></head>

		<style type="text/css">
			table { border : 2px black solid; }
			table thead { background : #a09f9d; }
			table td.last { padding-right : 15px; }
			table tbody { height : 20px; overflow-y : scroll; overflow-x : hidden; }
			table td { text-align : center; border : 1px solid  black; }
		</style>


<body>


	<table border = 1 >
		<thead>
			<tr>
				<th>------</th>
				<th>------</th>
				<th>------</th>
				<th>------</th>
				<th>------</th>
				<th>------</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>1.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
		
			<tr>
				<td>2.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
			
			<tr>
				<td>3.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
			
			<tr>
				<td>4.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
			
			<tr>
				<td>5.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
			
			<tr>
				<td>6.................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
				<td>..................</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

Jetzt könnte man eine Browserweiche? einfügen.


Damit wird die Tabelle aber wieder sonstwiegroß dargestellt und die obere Zeile verschwindet beim Scrollen.

Grummel.

Hat jemand einen Tipp für mich.

Ach ja, auch wenn ich einen Container um die Tabelle setze wird dieser vom IE auf die
Tabellengröße aufgezogen, egal wie hoch ich diesen definiere.

Vielen Dank schon mal.

hela · 23. Januar 2007

Hallo,

um im IE6 und IE7 den Tabellenkopf zu fixieren musst du

einen Dokumentetyp wählen, der die Browser in den Standard-Modus versetzt,
einen scrollbaren DIV-Container mit diskreter Höhe um die Tabelle legen,
den Tabellenkopf fixieren, indem du das TR-Element im Tabellenkopf schlicht und einfach relativ positionierst.

Beispielsweise so:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>IE-Test: Scrollbare Tabelle</title>

    <style type="text/css">
        table { border: 2px solid black; }
        table th { background: #999; }
        table tbody {
            height: 200px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        table td {
            text-align: center; 
            border: 1px solid  black; 
        }
        table td.last { padding-right: 17px; }
    </style>
    
    <!--[if IE]>
    <style type="text/css">
        div.tabdiv {
            width: 460px;
            height : 200px;
            overflow-y: auto;
            border: 2px solid black;
        }
        table {
            width: inherit; /* diskrete Tabellenbreite: 17px kleiner als DIV.tabdiv */
            border: 0; 
        }
        table thead tr{
            position: relative;        /* Header-Fixierung! */
            top: -1px;
        }
        table tbody {
            height : auto;
        }
        table td.last { padding-right: 0; }
    </style>
    <![endif]-->

    <script type="text/javascript">
        var spAnzahl = 6;
        var zAnzahl = 40;
        var firstTH = "<th>lfd. Nr.</th>\n";
        var leerTH = "<th>------</th>\n";
        var leerTD = "<td>..................</td>\n";
        var lastTD = "<td class=\"last\">..................</td>\n";

        function tHeader() {
            document.write('<thead>\n<tr>\n');
            document.write(firstTH);
            for (i=1; i<spAnzahl; i++) 
                document.write(leerTH);
            document.write('</tr>\n</thead>\n');
        }

        function tBody() {
            document.write('<tbody>\n');
            for (j=0; j<zAnzahl; j++) {
                document.write('<tr>\n<td>'+(j+1)+'</td>\n');
                for (i=1; i<(spAnzahl-1); i++)
                    document.write(leerTD);
                document.write(lastTD);
                document.write('</tr>');
            };
            document.write('</tbody>\n');    
        }

        function tabelle() {
            document.write('<table summary=\"\">\n');
            tHeader();
            tBody();
            document.write('</table>\n');
        }

    </script>
</head>

<body>
    <div class="tabdiv">
    <script type="text/javascript">tabelle();</script>
    </div>
</body>
</html>

Allerdings hast du nun im IE das Problem, dass der umschließende Div-Block eine diskrete Breite (nämlich die der Tabelle) braucht, da er sich sonst auf die Breite des Elternelements ausdehnt.

Im IE5.5 und Opera funktioniert das alles leider nicht, andere Browser habe ich noch nicht getestet.

Im FF bleibt die oberste Zeile einer Tabelle beim Scrollen stehen, im IE nicht.

TheRealSunmoon

Mitglied

hela

Neue Beiträge