tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
1714
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 18.01.07 13:17 #1
    TheRealSunmoon TheRealSunmoon ist offline Mitglied
    Registriert seit
    Feb 2004
    Beiträge
    21
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

    <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.
    <!--[if IE]>
    <style type="text/css">
    table tbody {height : auto; overflow-y : scroll; overflow-x : hidden; }
    </style>
    <![endif]-->

    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.
     
  2. 23.01.07 19:13 #2
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    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-Code:
    <!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.
    Geändert von hela (23.01.07 um 19:17 Uhr)
     
« Opacity über Flash-Elemente | Bild überlappen »

Ähnliche Themen

  1. DIV soll beim Scrollen stehen bleiben
    Von soezkan im Forum CSS
    Antworten: 9
    Letzter Beitrag: 08.01.10, 14:02
  2. Film bleibt bei einer bestimmten Szene stehen
    Von tittli im Forum Kino & Filme
    Antworten: 4
    Letzter Beitrag: 20.03.06, 17:06
  3. Dynamics Objekt bleibt nicht stehen!
    Von Bering im Forum Cinema 4D
    Antworten: 3
    Letzter Beitrag: 22.11.04, 14:16
  4. Fehler beim adden/löschen einer Zeile in einer Tabelle
    Von skynic im Forum PHP
    Antworten: 3
    Letzter Beitrag: 29.07.04, 12:57
  5. Beim Anklicken einer Zeile einer Tabelle...
    Von shapeless im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 11.10.03, 19:47