kenibu: Scrollbar in einer Tabelle, wie?

Ich habe eine Tabelle mit mehreren Zellen. In eine Zelle kommt der ganze Text und so, ich möchte aber nicht dass die Zelle vergrößert wird, sondern es soll ne Scrollbar auftachen... Wie geht des?

  1. hi,

    Ich habe eine Tabelle mit mehreren Zellen. In eine Zelle kommt der ganze Text und so, ich möchte aber nicht dass die Zelle vergrößert wird, sondern es soll ne Scrollbar auftachen... Wie geht des?

    stichwort: overflow

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo wahsaga,

      stichwort: overflow

      Das alleine bringt es aber noch nicht:

      http://forum.de.selfhtml.org/archiv/2005/2/t101086/#m620220

      Gruß Gernot

      1. Moinsen,

        stichwort: overflow

        Das alleine bringt es aber noch nicht:

        http://forum.de.selfhtml.org/archiv/2005/2/t101086/#m620220

        Genua! Wie ich grade schon schrieb, klappt das mit TD alleine nicht. Aber auf css4you.de Overflow  steht: "Anwendbar auf: Block-Elemente und <td>- und <th>-Tags"

        Irrt da meine Lieblings CSS-Seite?

        --
        cu,
        Maz
        1. Hallo,

          Genua! Wie ich grade schon schrieb, klappt das mit TD alleine nicht. Aber auf css4you.de Overflow  steht: "Anwendbar auf: Block-Elemente und <td>- und <th>-Tags"

          verpasse dem <td> noch den Style display:block, und voila, es geht ;-)

          Irrt da meine Lieblings CSS-Seite?

          Wer weiß? ;-)

          cu,
          ziegenmelker

          1. Hallo,

            verpasse dem <td> noch den Style display:block, und voila, es geht ;-)

            Korrektur: Es geht nicht im IE6, aber in modernen Browser.

            cu,
            ziegenmelker

        2. hi,

          Aber auf css4you.de Overflow  steht: "Anwendbar auf: Block-Elemente und <td>- und <th>-Tags"

          Irrt da meine Lieblings CSS-Seite?

          nein, http://www.w3.org/TR/CSS21/visufx.html#overflow:

          Applies to:   block-level and replaced elements, table cells, inline blocks

          allerdings war das in CSS2 noch anders, http://www.w3.org/TR/REC-CSS2/visufx.html#overflow:

          Applies to:   block-level and replaced elements

          es also nicht direkt auf TD, sondern auf ein darin befindliches element anzuwenden, bietet sich aus rücksichtnahme auf browser, die die änderungen in CSS2.1 in diesem punkte noch nicht umsetzen, tatsächlich an; das hatte ich vergessen zu erwähnen.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
        3. Was ist ein Div-Element? Ich kann noch kein css...
          Könnt ihr schreiben wie des ganze funktioniert und wie ich des machen muss? Oder gibts irgendwo en tut für des?
          kann mir vll jemand über icq behilflich sein (nr: 266158506)?

          1. Hallo,

            Was ist ein Div-Element? Ich kann noch kein css...

            Würdest du bitte die Textzeilen hier ganz oben im Forum mal lesen?

            Könnt ihr schreiben wie des ganze funktioniert und wie ich des machen muss? Oder gibts irgendwo en tut für des?

            Ja. http://de.selfhtml.org/

            kann mir vll jemand über icq behilflich sein (nr: 266158506)?

            Vermutlich: Nein.

            cu,
            ziegenmelker

            P.s. Begrüßung und Verabschiedung gehören hier wie im wirklichen Leben durchaus zum guten Stil.

            1. Ich kann HTML, aber bisher nur HTML...
              Hab auch schon im Archiv gesucht, aber nix gefunden.
              Wieso könnt ihr mir dass nicht einfach kurz an nem beispiel zeigen?

              1. Hallo kenibu,

                Ich kann HTML, aber bisher nur HTML...

                weil du so lieb gefragt hast:

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

                Gruß Gernot

                1. super, vielen Dank.
                  Danke an alle.

                2. Hallo Gernot,

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

                  das ist kein gutes Beispiel, denn Mozilla, Firefox und Opera zeigen nur eine leere Seite.

                  cu,
                  ziegenmelker

                  1. Hallo ziegenmelker,

                    das ist kein gutes Beispiel, denn Mozilla, Firefox und Opera zeigen nur eine leere Seite.

                    Du hast Recht! Peinlich, normalerweise teste ich alles mit diesen drei Browsern. Da muss ich wohl noch nacharbeiten. Ich bin mir aber sicher, es gibt auch für Opera und Mozilla eine Lösung!

                    Vielleicht bist du ja schneller?

                    Gruß Gernot

                    1. Hallo Gernot,

                      das ist schon interessant. Wenn ich im Mozilla STRG-T tippe, wird die Seite in einem neuen Tab erneut geöffnet und dann kann ich wenigstens den Text sehen, aber das div hat keine Scrollbar, sondern nur die Seite. Werde mal eine korrekte Documentendefinition beifügen.

                      cu,
                      ziegenmelker

                    2. Hallo Gernot,

                      Vielleicht bist du ja schneller?

                      ;-)

                      das div braucht offenbar eine Höhenangabe in px, sonst 'zieht' es die Tabelle auf.

                      cu,
                      ziegenmelker

                      1. Hallo ziegenmelker,

                        das div braucht offenbar eine Höhenangabe in px, sonst 'zieht' es die Tabelle auf.

                        also ich spiel im Moment auch mit dem Wert height:inherit, auch beim TR-Element, das bewirkt schon bei Mozilla und Opera, dass wenigstens was angezeigt wird, nur leider noch nicht in den richtigen Proportionen.

                        Dass Wahsaga und Ingo sich so vornehm heraushalten? Tse, tse, wahrscheinlich wissen sie warum!

                        Gruß Gernot

                        1. Hallo Gernot,

                          also ich spiel im Moment auch mit dem Wert height:inherit, auch beim TR-Element, das bewirkt schon bei Mozilla und Opera, dass wenigstens was angezeigt wird, nur leider noch nicht in den richtigen Proportionen.

                          hm, ich hab' deinen kleinen Flüchtigkeitsfehler gefunden. Tipp: es ist ein Semikolon ;-)

                          Dass Wahsaga und Ingo sich so vornehm heraushalten? Tse, tse, wahrscheinlich wissen sie warum!

                          Hehe, das kann schon sein. *gg*

                          cu,
                          ziegenmelker

                          1. Hallo ziegenmelker,

                            hm, ich hab' deinen kleinen Flüchtigkeitsfehler gefunden. Tipp: es ist ein Semikolon ;-)

                            Ja, das fehlende Semikolon habe ich auch längst gefunden, aber es hilft gegen das Problem leider nichts, es zu ergänzen.

                            Gruß Gernot

                        2. Hi,

                          also ich spiel im Moment auch mit dem Wert height:inherit, auch beim TR-Element,

                          das kannst Du Dir ruhig sparen. Welche Höhe sollte hier vererbt werden?
                          Auch auto hilft Dir wenig, da
                          "The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells. A 'height' value of 'auto' for a 'table-row' means the row height used for layout is MIN. MIN depends on cell box heights and cell box alignment"

                          Tabellen haben halt diese schöne Flexibilität...

                          Dass Wahsaga und Ingo sich so vornehm heraushalten? Tse, tse, wahrscheinlich wissen sie warum!

                          Wenn's Dich interessiert:

                          • ich hasse seiteninterne Scrollbalken, besonders wenn sie durch overflow generiert werden.
                          • scrollbare Bereichen in Tabellen machen für mich noch weniger Sinn
                          • und schließlich fände ich es wenig hilfreich, jemanden scrollbare Bereiche zu erklären, dem noch nicht einmal <div> geläufig ist. Jeder sollte erstmal mit einfachen Layouts anfangen, zumal die sogar noch benutzerfreundlicher wären.

                          freundliche Grüße
                          Ingo

                          1. Hallo Ingo,

                            • und schließlich fände ich es wenig hilfreich, jemanden scrollbare Bereiche zu erklären, dem noch nicht einmal <div> geläufig ist. Jeder sollte erstmal mit einfachen Layouts anfangen, zumal die sogar noch benutzerfreundlicher wären.

                            Es geht doch nicht nur um den Ausgangsfragesteller, es ist doch durchaus legitim zu fragen, wie man tabellarische Daten der Übersicht halber innerhalb von Tabellenzellen auf eine bestimmten Anzeigebereich reduziert!

                            Gruß Gernot

                            1. Hi,

                              Es geht doch nicht nur um den Ausgangsfragesteller, es ist doch durchaus legitim zu fragen, wie man tabellarische Daten der Übersicht halber innerhalb von Tabellenzellen auf eine bestimmten Anzeigebereich reduziert!

                              da stimme ich Dir zu. Nur wurde hier gefragt:

                              In eine Zelle kommt der ganze Text und so, ich möchte aber nicht dass die Zelle vergrößert wird, sondern es soll ne Scrollbar auftachen

                              freundliche Grüße
                              Ingo

                              1. Hallo Ingo,

                                da stimme ich Dir zu. Nur wurde hier gefragt:

                                In eine Zelle kommt der ganze Text und so, ich möchte aber nicht dass die Zelle vergrößert wird, sondern es soll ne Scrollbar auftachen

                                Also ich bin ja fast, entgegen meiner ersten Prognose, versucht zu sagen: wenn du keine allgemeingültige Lösung weißt, dann gibt es keine!

                                Vielleicht lässt sich ja noch jemand anders herausfordern. Ich habe es ehrlich gesagt erst einmal aufgegeben!

                                Gruß Gernot

                                1. Hallo Gernot,

                                  Vielleicht lässt sich ja noch jemand anders herausfordern. Ich habe es ehrlich gesagt erst einmal aufgegeben!

                                  ja, das sieht nicht gut aus. Zumal mein Opera 7.54 noch nicht einmal die blanke Tabelle ohne div korrekt darstellen kann. Wobei alle Zellen mit width und height über CSS formatiert sind. IE, FF und Mozilla zeigen sie wie gewollt an.

                                  cu,
                                  ziegenmelker

                  2. Hallo ziegenmelker und die anderen,

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

                    das ist kein gutes Beispiel, denn Mozilla, Firefox und Opera zeigen nur eine leere Seite.

                    das hat mir keine Ruhe gelassen. Ich habe jetzt mal eine neue Version hochgeladen, die man wenigstens auch mit Mozilla 1.7.2 sehen kann. Mit Opera 7.54 könnte man sie auch darstellen, wenn man mit overflow:scroll statt verflow:auto einen hässlichen und eigentlich unnötigen horizontalen Scrollbalken in Kauf nähme. Vielleich kann mir ja hier jemand mal eine CSS-Browserweiche für Opera nenn, damit ich das auch noch einbauen kann.

                    Der Trick war übrigens, dass man in der Tabellenzelle, die man scrollen möchte zwei Div-Elemente ineinander verschachten muss; das äußere mit position:relative; und das innere mit position:absolute, sowie der overflow-Angabe.

                    Gruß Gernot

                    1. Hallo Gernot,

                      das hat mir keine Ruhe gelassen. Ich habe jetzt mal eine neue Version hochgeladen, die man wenigstens auch mit Mozilla 1.7.2 sehen kann.

                      jupp, klappt ;-)

                      Mit Opera 7.54 könnte man sie auch darstellen, wenn man mit overflow:scroll statt verflow:auto einen hässlichen und eigentlich unnötigen horizontalen Scrollbalken in Kauf nähme. Vielleich kann mir ja hier jemand mal eine CSS-Browserweiche für Opera nenn, damit ich das auch noch einbauen kann.

                      Vielleicht http://news.css-technik.de/comments/468_0_1_0_C/? Ich habe es aber noch nicht getestet.

                      cu,
                      ziegenmelker

                      1. Hallo ziegenmelker und die anderen,

                        Vielleich kann mir ja hier jemand mal eine CSS-Browserweiche für Opera nenn, damit ich das auch noch einbauen kann.

                        Vielleicht http://news.css-technik.de/comments/468_0_1_0_C/? Ich habe es aber noch nicht getestet.

                        Ja das Opera-Stylesheet funktioniert, ich habe es noch eingebaut.

                        Der Internet-Explorer muss übrigens im Quirks-Mode sein, sonst scrollt da nur die ganze Seite, nicht aber die Zelle.

                        Anfängern, die hier eine Tabelle zu Layoutzwecken "missbrauchen" wollen, kann ich nur sagen, dass die vermeintlich einfachere Tabellenlayoutlösung hier deutlich komplizierter ist als eine tabellenfreie Lösung, z.B. mit floatenden Div-Elementen. Wer aber auf semantisches Markup Wert legttatsächlich tabellarische Daten hat, und diese in Tabellenzellen scrollen lassen will, der mag sich an dieser nun gefundenen Klimmzug-Lösung orientieren.

                        Kenibu hingegen, der mir gemailt hat, weil er auch in HTML noch so am Anfang steht, dass er hier zum ersten Mal von Div-Elementen gehört hat, habe ich aber erst einmal das Stichwort "Iframe" genannt. Damit ist er dann auch ohne weitere Hilfe klargekommen. Keine Angst: dass Iframes nicht die eleganteste Lösung sind, Nachteile haben und dass er sich mal näher mit CSS beschäftigen soll, habe ich ihm auch noch gesteckt.

                        Ich denke aber, man sollte von Anfängern nicht zu viel auf einmal erwarten. Sie brauchen Erfolgserlebnisse, damit sie bei der Stange bleiben und weiter lernen.

                        Gruß Gernot

                        1. Hallo Gernot,

                          Ja das Opera-Stylesheet funktioniert, ich habe es noch eingebaut.

                          Der Internet-Explorer muss übrigens im Quirks-Mode sein, sonst scrollt da nur die ganze Seite, nicht aber die Zelle.

                          nun, es bleiben leider noch immer erhebliche Nachteile bei dieser "Lösung". Abgesehen von deiner Anmerkung zum Quirks-Mode sind nur die Gecko-Browser in der Lage, das Ganze wirklich korrekt anzuzeigen. Opera 7.54 rendert die Seite grottenlangsam, wenn man die Größe des Browsers variert (ist mir schon oft aufgefallen, darum mag ich ihn auch nicht). Und noch schlimmer, teilweise geht die Seite vollends "verloren" aka "nix mehr zu sehen". Der IE6 verliert wenigstens die Darstellung nicht, aber bei ihm erscheinen je nach Größenänderung des Browserfensters auch ab und zu horizontale Scrollbalken.
                          Bei all diesen Darstellungsproblemen würde ich doch eher Abstand von einem scrollbaren Zelleninhalt nehmen, oder eben die nötigen festen px-Werte einsetzen, so daß die Darstellung klappt.

                          Anfängern, die hier eine Tabelle zu Layoutzwecken "missbrauchen" wollen, kann ich nur sagen, dass die vermeintlich einfachere Tabellenlayoutlösung hier deutlich komplizierter ist als eine tabellenfreie Lösung, z.B. mit floatenden Div-Elementen.

                          Das sehe ich auch so, und es ist zudem erheblich zukunftssicherer.

                          Wer aber auf semantisches Markup Wert legttatsächlich tabellarische Daten hat, und diese in Tabellenzellen scrollen lassen will, der mag sich an dieser nun gefundenen Klimmzug-Lösung orientieren.

                          Es ist schon eine Krücke mit etlichen Nachteilen, also ich möchte eher abraten.

                          Kenibu hingegen, der mir gemailt hat, weil er auch in HTML noch so am Anfang steht, dass er hier zum ersten Mal von Div-Elementen gehört hat, habe ich aber erst einmal das Stichwort "Iframe" genannt. Damit ist er dann auch ohne weitere Hilfe klargekommen. Keine Angst: dass Iframes nicht die eleganteste Lösung sind, Nachteile haben und dass er sich mal näher mit CSS beschäftigen soll, habe ich ihm auch noch gesteckt.

                          Ich weiß nicht, was immer alle gegen iframes haben, ich halte sie für ziemlich genial, wenn man sie an der richtigen Stelle einsetzt. Und solange es keine divs gibt, die ein src=irgenwas akzeptieren, möchte ich sie nicht missen.

                          Ich denke aber, man sollte von Anfängern nicht zu viel auf einmal erwarten. Sie brauchen Erfolgserlebnisse, damit sie bei der Stange bleiben und weiter lernen.

                          Genau meine Meinung, das wir hier aber des Öfteren glatt übersehen. Naja, nicht Jeder hier hat wohl schon Nachwuchs und entsprechendes Training in der Wissensvermittlung, oder eine natürlich Begabung dazu.

                          cu,
                          ziegenmelker

          2. hi,

            Was ist ein Div-Element?

            och komm, dass sind jetzt aber absolute HTML-grundlagen: http://de.selfhtml.org/html/text/bereiche.htm#block

            Könnt ihr schreiben wie des ganze funktioniert und wie ich des machen muss? Oder gibts irgendwo en tut für des?
            kann mir vll jemand über icq behilflich sein (nr: 266158506)?

            nein.

            beschäftige dich etwas intensiver mit den grundlagen der von dir verwendeten techniken. selfhtml ist dafür eine sehr gute anlaufstelle.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
          3. Hi,

            Was ist ein Div-Element? Ich kann noch kein css...

            Das hat nichts mit CSS zu tun, sondern ist ein HTML-Element.
            Wieso behauptest Du

            Ich kann HTML, aber bisher nur HTML...

            wenn Dir noch nicht einmal dieses nun wirklich gebräuchliche Element nichts sagt?

            freundliche Grüße
            Ingo

    2. Moinsen,

      stichwort: overflow

      ich guck grad mal und teste, da ich overflow noch nie auf TDs angewendet hab:

        
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
      <html>  
      <head>  
      <title>Test</title>  
      <style type="text/css">  
        
      table{  
      }  
        
      td{  
       width: 200px;  
       height: 50px;  
       border: 1px solid #F00;  
       overflow: auto;  
      }  
        
      div{  
       width: 200px;  
       height: 50px;  
       border: 1px solid #000;  
       overflow: auto;  
      }  
        
      </style>  
      </head>  
      <body>  
        
      <table>  
      <tr>  
       <td>eins</td>  
       <td>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br></td>  
      </tr>  
      </table>  
        
      <div>test</div>  
      <div>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br>zwei<br></div>  
        
      </body></html>  
      
      

      und wunder mich doch etwas, weil das overflow keine Wirkung auf die TD hat. Hab ich was falsch gemacht?

      --
      cu,
      Maz