Mit der CSS-Eigenschaft overflow:auto lassen sich übergrosse Inhalte in einem DIV-Element scrollen.
Dieser Workshop beschäftigt sich mit Tabellenzellen, deren Inhalt gescrollt werden kann.
| td.head |
|
td.scroll content starts here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum aliquet dui nec congue. In dictum eros vel quam molestie dictum. Vivamus porta turpis eu nisi congue vulputate. Aenean euismod faucibus nisl, at mollis massa pretium nec. Aenean lobortis turpis vel urna tempor vel egestas tellus mollis. Aliquam fermentum imperdiet consectetur. Mauris adipiscing blandit nisi. Integer ullamcorper feugiat eros, hendrerit varius arcu fermentum at. Sed vestibulum, metus et porta rutrum, diam enim scelerisque ligula, eget lobortis est quam ut velit. Ut sed posuere quam. Suspendisse a posuere augue. Suspendisse placerat pellentesque semper. Sed id enim ut nunc volutpat consequat. Suspendisse potenti. Nullam dolor orci, mollis at interdum ac, accumsan in tellus. Aliquam erat volutpat. Suspendisse in pretium elit. Aenean convallis, nisi id venenatis blandit, nulla lacus adipiscing sapien, quis volutpat metus enim eu neque. Fusce sodales, eros ornare congue convallis, velit nulla malesuada velit, quis cursus enim risus commodo enim. Sed vehicula, nibh nec mollis sagittis, metus lorem interdum nisl, ac rutrum lacus ligula nec dolor. Ut congue, neque eu ultricies dignissim, orci nibh imperdiet sapien, eget pellentesque mi diam ac odio. Praesent pretium facilisis sollicitudin. In hac habitasse platea dictumst. Praesent auctor hendrerit erat, vel lobortis nisi bibendum sit amet. Duis quam ipsum, feugiat ac viverra ut, scelerisque sed justo. Nam at augue odio, eu iaculis diam. Vivamus non metus at augue cursus porttitor sed vel erat. Duis sodales placerat nibh, quis imperdiet sem sodales mattis. Suspendisse at velit quis libero blandit vestibulum. Cras viverra quam non diam rhoncus faucibus. Integer vel varius velit. Nullam suscipit vulputate sollicitudin. - END |
Für das zu modifizierende <td>-Tag (= Tabellenzelle) werden im Stylesheet zwei CSS-Klassen td.head und td.scroll angelegt und mit den gewünschten CSS-Eigenschaften formatiert:
Die Klassen werden mit dem Universalattribut class in den entsprechenden <td>-Elementen aufgerufen:
Die CSS-Eigenschaft overflow: ist von Bedeutung, wenn innere Elemente (=Inhalte) grösser sind als ihr Anzeigebereich. Im oberen Demo beträgt die gewählte Höhe für td.scroll 100px, der Text benötigt darin aber 170px. Mit der Angabe overflow: auto bzw. scroll wird für den Anzeigebereich festgelegt, dass der übergrosse Inhalt in ihm scrollen soll.
Da diese Eigenschaft nicht browserübergreifend direkt auf das <td> -Element anwendbar ist, wird eine DIV-Box mit der Deklaration style="overflow: auto;" innerhalb der Tabellenzelle eingebettet, und der darzustellende Inhalt in diesem Element eingefügt:
Anmerkung: overflow: auto zeigt die Scroll-Leiste erst dann an, wenn die Inhaltgrösse die Breite und Höhe des Anzeigebereichs überschreitet. overflow: scroll zeigt die Scroll-Leiste immer an, also auch dann, wenn der Inhalt die Fenstergrösse nicht überschreitet.
Innerhalb einer Tabelle lassen sich auch mehrere scrollfähige Tabellenzellen realisieren.
Dieses CSS-Modell einer scrollfähigen Playlist habe ich für meine mp3-CDs entwickelt, es unterstützt das Scrollen einer mehrspaltigen Tabelle mit feststehenden Tabellen-Headers.