Daniel N.: Scrollbare Tabellen-Zelle

SELF-Forum

Scrollbare Tabellen-Zelle

Daniel N.
– Informationen zu den Bewertungsregeln

Hallo,

Ich möchte eine so Tabelle formatieren, dass eine (ausgezeichnete) Zelle scrollbar wird, sobald ihr Inhalt nicht mehr in diese Zelle passt. Diese Tabellen-Zelle soll dabei die gesamte ihr noch zur Verfügung stehende Höhe einnehmen.

Folgende Skizze verdeutlicht (hoffentlich) mein Vorhaben:

+------------------------------------+
|                                    |
+------------------------------------+
|                                  |^|
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  |v|
+------------------------------------+
|                                    |
+------------------------------------+

Mein Versuche haben bisher folgendes ergeben:

  
<?xml version="1.0" encoding="ISO-8859-1"?>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" id="top">  
  
<head>  
<title>Table-Test 100% Höhe</title>  
  
<style type="text/css">  
  
 html, body, form {  
  margin:0;  
  padding:0;  
 }  
  
 html, body {  
  height:100%;  
  overflow: hidden;  
 }  
  
 table {  
  height:100%;  
  width:100%;  
  border:3px solid green;  
 }  
  
 td.content {  
  vertical-align:top;  
  height:inherit;  
 }  
  
 td.header {  
  height: 33px;  
  background-color: olive;  
 }  
  
 td.footer {  
  height: 33px;  
  background-color: olive;  
 }  
  
 </style>  
  
</head>  
  
  
<body>  
  
<table>  
 <tr>  
  <td class="header">Header</td>  
 </tr>  
 <tr>  
  <td class="content">  
  
  <div style="height:100%; overflow: auto;">  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  </div>  
  </td>  
 </tr>  
 <tr>  
  <td class="footer">Header</td>  
 </tr>  
</table>  
  
  
</body>  
</html>

Ich habe verschiedene Ansätze versucht, leider bisher ohne Erfolg.
Folgender (alter) Thread hat dieses Problem bereits einmal diskutiert, meiner Meinung nach ohne richtig funktionierendes Gesamtergebnis.

Ich würde mich über Ideen und Hinweise von euch sehr freuen!

P.S.:
Das ganze soll übrigens kein "Seitenlayout" werden und ich kenne weiß auch, dass <table> zur Auzeichnung von tabellarischen Daten ist. Also bitte keine solche Diskussion in diesem Thread, dass sehe ich genauso. ;-)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Scrollbare Tabellen-Zelle

    shn
    – Informationen zu den Bewertungsregeln

    Servus,

    <?xml version="1.0" encoding="ISO-8859-1"?>

    Wenn du nicht völlig die Nerven am IE <=6 verlieren willst, solltest du die XML-Deklaration weglassen; die versetz ihn nämlich in den Quirks mode.

    td.content {
      vertical-align:top;
      height:inherit;
    }
    [...]
      <td class="content">

    <div style="height:100%; overflow: auto;">

    td.content hat keine festgelegte Höhe. 100% von nichts ist undefiniert.
    Warum überhaupt das zusätzliche div?

    P.S.:
    Das ganze soll übrigens kein "Seitenlayout" werden

    Sieht aber verdammt danach aus ;)

    Gruss
    Patrick

    --
    sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Scrollbare Tabellen-Zelle

      Daniel N.
      – Informationen zu den Bewertungsregeln

      Moin moin,

      Wenn du nicht völlig die Nerven am IE <=6 verlieren willst, solltest du die XML-Deklaration weglassen; die versetz ihn nämlich in den Quirks mode.

      Bin auf gutem Wege die Neven zu verlieren, allerdings kämpfe ich z. Z noch mit allen Browsern ;-) Auch der FF zeigt noch keine Scrollbar an der gewünschten Stelle.

      td.content hat keine festgelegte Höhe. 100% von nichts ist undefiniert.

      Ok, stimmt. Ich habe also für "td.content" height:100% eingestellt.

      Warum überhaupt das zusätzliche div?

      Stimmt auch, der ist über und war der Versuch eines workarounds.

      Mit deinen Hinweisen komme ich zu folgender Seite, die leider ebenfalls noch nicht funktioniert (weder FF noch IE 6):

        
<html xmlns="http://www.w3.org/1999/xhtml" id="top">  
  
<head>  
<title>Table-Test 100% Höhe</title>  
  
<style type="text/css">  
  
 html, body {  
  margin:0;  
  padding:0;  
 }  
  
 html, body {  
  height:100%;  
 }  
  
 table {  
  height:100%;  
  width:100%;  
  border:3px solid red;  
 }  
  
 td.content {  
  vertical-align:top;  
  height:100%;  
 }  
  
 td.header {  
  height: 33px;  
  background-color: olive;  
 }  
  
 td.footer {  
  height: 33px;  
  background-color: olive;  
 }  
  
 </style>  
  
</head>  
  
  
<body>  
  
<table>  
 <tr>  
  <td class="header">Header</td>  
 </tr>  
 <tr>  
  <td class="content">  
  
  <h1>So geht's leider auch nicht</h1>  
  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  
  </td>  
 </tr>  
 <tr>  
  <td class="footer">Footer</td>  
 </tr>  
</table>  
  
  
</body>  
</html>

      P.S.:
      Das ganze soll übrigens kein "Seitenlayout" werden

      Sieht aber verdammt danach aus ;)

      Das ist mir durachaus bewusst, deswegen hatte ich es dazu geschrieben...

      Viele Grüße
      Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Scrollbare Tabellen-Zelle

    Gernot Back
    – Informationen zu den Bewertungsregeln

    Hallo Daniel,

    Ich möchte eine so Tabelle formatieren, dass eine (ausgezeichnete) Zelle scrollbar wird, sobald ihr Inhalt nicht mehr in diese Zelle passt. Diese Tabellen-Zelle soll dabei die gesamte ihr noch zur Verfügung stehende Höhe einnehmen.

    ich pflege, bei derartigen Fragen immer folgenden Link hier zu posten, allerdings nie ohne die Rückfrage, wofür du eine Tabelle eigentlich für nötig hältst. Hast du tabellarische Daten oder verhält es sich wie in meinem Bespiel, dass du eine Tabelle zu reinen Layoutzwecken missbrauchen willst?

    Wenn Letzteres der Fall ist, solltest du die Sache noch einmal überdenken, zumal Opera im Allgemeinen und der IE je nach Version im Falle eines Fenster-Resizes beim tabellengestützen Ansatz ziemliche Macken haben, was, wenn du stattdessen ausschließlich weniger "semantisch" festgelegte Elemente, wie etwa DIVs verwenden würdest (ohne die das folgende Beispiel ja sowieso auch nicht auskommt), nicht passieren würde:

    http://www.sprachlernspiele.de/selftests/scrollzelle.html

    Gruß Gernot

    --
    super me
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Scrollbare Tabellen-Zelle

      Daniel N.
      – Informationen zu den Bewertungsregeln

      Hallo Gernot,

      ich pflege, bei derartigen Fragen immer folgenden Link hier zu posten, allerdings nie ohne die Rückfrage, wofür du eine Tabelle eigentlich für nötig hältst. Hast du tabellarische Daten oder verhält es sich wie in meinem Bespiel, dass du eine Tabelle zu reinen Layoutzwecken missbrauchen willst?

      mein P.S (vom ersten Posting):
      P.S.:
      Das ganze soll übrigens kein "Seitenlayout" werden und ich kenne weiß auch, dass <table> zur Auzeichnung von tabellarischen Daten ist. Also bitte keine solche Diskussion in diesem Thread, dass sehe ich genauso. ;-)

      Wenn Letzteres der Fall ist, solltest du die Sache noch einmal überdenken, zumal Opera im Allgemeinen und der IE je nach Version im Falle eines Fenster-Resizes beim tabellengestützen Ansatz ziemliche Macken haben, was, wenn du stattdessen ausschließlich weniger "semantisch" festgelegte Elemente, wie etwa DIVs verwenden würdest (ohne die das folgende Beispiel ja sowieso auch nicht auskommt), nicht passieren würde:

      Eine Lösung mit <div>s wäre für mich hier auch ok, an dieser Stelle kann ich aus bestimmten Gründen auf eine "gute Semantik" verzichten.

      http://www.sprachlernspiele.de/selftests/scrollzelle.html

      Das Beispiel hatte ich bereits gefunden, leider funktioniert das nur, wenn der Browser im Quirksmode ist. Das ist für mich keine Option.

      Vielleicht ist aber auch ein anderer Ansatz - ohne Tabelle - sinnvoller. (Ich hatte natürlich auch soetwas schon probiert, bisher erfolglos.) Ich versuche folgendes zu realisieren:

      1. eine "Box" mit drei "Zeilen" darin
      2. die Box soll 100% hoch sein
      3. die mittlere Zeile soll den gesamten zur Verfügung stehenden Platz
           einnehmen
      4. die mittlere Zeile soll bei einem overflow scrollen

      Ich habe noch keine Möglichkeit gefunden, die Punkte 3) und 4) beide zu unterstützen.

      Siehe dazu auch die Skizze aus meinem ersten Posting.

      Weitere Ideen?

      Vielen Dank und viele Grüße
      Daniel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Scrollbare Tabellen-Zelle

        Gernot Back
        – Informationen zu den Bewertungsregeln

        Hallo Daniel,

        1. eine "Box" mit drei "Zeilen" darin
        2. die Box soll 100% hoch sein
        3. die mittlere Zeile soll den gesamten zur Verfügung stehenden Platz
             einnehmen
        4. die mittlere Zeile soll bei einem overflow scrollen

        Ich habe noch keine Möglichkeit gefunden, die Punkte 3) und 4) beide zu unterstützen.

        Siehe dazu auch die Skizze aus meinem ersten Posting.

        Hast du den Artikel von Dennis schon gelesen? Das Beispiel sieht ja zumindest im Firefox und in Opera ziemlich ähnlich aus, auch wenn der Footer beim Verkleinern des Fensters im IE7 (Mit dem Sechser habe ich es nicht noch einmal überprüft) ein wenig zu schrumpfen scheint.

        http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel5.htm

        Vielleicht muss man für den IE7 da ja nur einiges, was über Star-HTML-Hack nur den früheren Versionen zukommt über Conditional-Coments immer auch noch dem IE7 geben.

        Gruß Gernot

        --
        super me
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Scrollbare Tabellen-Zelle

          Daniel N.
          – Informationen zu den Bewertungsregeln

          Hallo Gernot,

          Hast du den Artikel von Dennis schon gelesen? Das Beispiel sieht ja zumindest im Firefox und in Opera ziemlich ähnlich aus, auch wenn der Footer beim Verkleinern des Fensters im IE7 (Mit dem Sechser habe ich es nicht noch einmal überprüft) ein wenig zu schrumpfen scheint.

          http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel5.htm

          Danke für deinen Tipp, den Artikel kannte ich allerdings schon. Er hilft mir deshalb nicht weiter, weil mit position:fixed gearbeitet wird, meine Vorhaben aber nicht am Viewport ausgerichtet werden darf.

          Ich möchte (innerhalb einer Anwendungsentwicklung mit Java ServerFaces) eine Komponente erstellen, die überall auf einer Seite  genutzt werden können soll.

          Es wird daher wohl auf eine Lösung mit Javascript herauslaufen, was auch ok ist, da diese (AJAX-) Anwendung sowieso massiv auf Javascript angewiesen ist.

          Gibt es hier Tipps oder Links, die mir bei meinem Vorhaben helfen könnten?

          Vielen Dank und viele Grüße
          Daniel N.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Scrollbare Tabellen-Zelle

            Daniel N
            – Informationen zu den Bewertungsregeln

            Hallo,

            meine Anforderungen lassen sich sehr gut mit dem Dojo-Toolkit umsetzen. Dieses bietet die gewünschten Möglichkeiten, ohne dass man selber javascript dazu schreiben muß. Das ganze funktioniert auch browserübergreifend, so weit ich getestet habe, ganz gut.

            Die Webseite ist unter der URL http://www.dojotoolkit.org erreichbar.

            Die Panel-Komponenten sind z. B. unter http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout beschrieben.

            Viele Grüße
            Daniel N.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  3. Scrollbare Tabellen-Zelle

    Daniel N.
    – Informationen zu den Bewertungsregeln

    Hallo,

    ich habe noch einen zweiten Ansatz ohne Tabelle, mit <div> versucht. Klappt so leider auch nicht. Hier mein Versuch:

      
  
<?xml version="1.0" encoding="ISO-8859-1"?>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<title>Test: position:absolute</title>  
</head>  
  
<body>  
  
<div  
 style="position:relative; height:200px; width: 400px; border: 3px solid olive;">  
  
<div  
 style="position: absolute; top: 0; height: 30px; width: 100%; background-color: yellow;">  
  
Zeile 1</div>  
  
<div  
 style="position: absolute; top: 30px; bottom 30px; left: 0; right: 0; overflow: scroll;">  
  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
<p>Zeile 2</p>  
</div>  
  
<div  
 style="position: absolute; bottom:0; height: 30px; width: 100%; background-color: yellow;">  
  
Zeile 3</div>  
  
</div>  
  
</body>  
</html>

    Was meint ihr zu diesem Ansatz? Mache ich etwas falsch oder geht soetwas grundsätzlich nicht?

    Viele Grüße
    Daniel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. Scrollbare Tabellen-Zelle

    Shadowcrow
    – Informationen zu den Bewertungsregeln

    hi $name,

    Hallo,

    Ich möchte eine so Tabelle formatieren, dass eine (ausgezeichnete) Zelle scrollbar wird, sobald ihr Inhalt nicht mehr in diese Zelle passt. Diese Tabellen-Zelle soll dabei die gesamte ihr noch zur Verfügung stehende Höhe einnehmen.

    also wenn ich das richtig verstehe, müßte es so gehen:

    <td class=c1>text</td>

    und dann im css z.b.:

    div.c4 {    /*css für die ausrichtung content */
    font-size : 0.85em;
    height : 372px;
    overflow : auto;
    padding : 0px 15px 0px 17px;
    margin : 0px 0px 5px 7px;

    zumindest bei mir funzt es (und ja ich schäm mich dafür ;-)).

    gruss
    shadow

    --
    If there's anything more important than my ego around, I want it caught and shot, now.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln