Tabellen mit Scollbar
    
 Home • Tabellen • CSS • Scrollbar für Tabellen  

 Tipp für zwischendurch

Scrollbare Tabellen sind manchmal ein Wunschtraum. Zumindest die Umsetzung scheint erst einmal schwierig. Dabei geht das ganz einfach, wendet man einen kleinen Kniff an.
Tabellen mit Scrollbar / Bildlaufleiste

Besucher Browser %
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%

Möchten Sie lediglich einen vertikalen Scrollbar (rechts) ist es von Vorteil, wenn die Tabellenbreite bekannt ist. Am besten, Sie legen die Breite präzise fest. Das geht am einfachsten, wenn Sie CSS einsetzen oder die Breite über das Attribut 'width' definieren. 
<table width="350" border="0" cellspacing="1" cellpadding="2">

<table style="width:35px;" width="350" border="0" cellspacing="1" cellpadding="2">
Die gesamte Tabelle stecken Sie nun in einen <div>-Bereich, für den Sie lediglich wenige Style-Angaben eintragen. Welche Angaben an Stelle der xxx das sind, lesen weiter unten.

<div style=" xxx ">

Tabelle steht hier

</div>
Das Ergebnis:
Besucher Browser %
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%




   Nun zu den Style-Angaben

Die Formatierung des <div>-Bereichs wird durch CSS-Angaben festgelegt.

Breite

Die Tabelle ist 350 Pixel breit. Ein Scrollbar benötigt mindestens 20 Pixel Breite. Daraus folgt: Die Gesamtbreite des <div>-Bereichs sollte mindestens 370 Pixel sen, wenn ein horizontaler Scrollbar vermieden werden soll.

Höhe

Die Höhe können Sie selbst bestimmen und auf ein angemessenes Maß festlegen.

Rand

Sie können einen Rand für den Bereich festlegen oder entscheiden sich für eine Anzeige ohne Rand.

Overflow

Der wichtigste Eintag! Damit wir festgelegt wie der Browser die Situation handhabt, wenn der in der Größe fest definierte <div>-Bereich für die Darstellung der Tabelle nicht ausreicht. Lassen Sie einfach den Browser entscheiden und tragen 'auto' ein.

<div style="height:130px; width:370px; font-size:12px; overflow:auto;">

Tabelle steht hier

</div>
... also eigentlich recht einfach:

Die Tabelle steht innerhalb eines <div>-Bereichs der um 20 Pixel breiter ist als die Tabelle und für den die Overflow-Eigenschaften auf "Scrollbars sind erlaubt - automatische Entscheidung" festgelegt ist.



Fehlerquellen:

Margin-Angaben, Padding-Angaben und Randbreiten wurden nicht berücksichtigt! Die berechnete Breite stimmt nicht in jedem Browser. Ein horizontaler Scrollbar wird angezeigt.



Das benötigte Maß für die Breite, einschließlich Scrollbar ist nun 385 Pixel.

Besucher Browser %
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%
15772 Mozilla Firefox 73%
4581 Internet Explorer 6 21.2%
442 Mozilla 2%
122 Opera 0.5%
100 Safari 0.4%
99 Netscape 0.4%


   Auch das geht

a  Text

Wenn Sie einen Text (oder Bilder) innerhalb eines solchen <div>-Bereich notieren, erscheint das ganze beinahe wie ein iFrame. Es ergeben sich völlig neue Möglichkeiten für die Darstellung innerhalb einer HTML-Seite.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.




b  Listen

Logisch (und interessant): Das kann man auch für scrollbare Listen einsetzen.


  • Freitag abend
  • Freitagabend
  • Freitag abends
  • freitagabends
  • freitags abends
  • in acht nehmen
  • in Acht nehmen
  • außer acht lassen
  • außer Acht lassen
  • achtgeben
  • Acht geben
  • alleinerziehend
  • allein erziehend
  • allein gültige
  • alleingültige
  • Alleinerziehende
  • allein Erziehende
  • die allermeisten
  • die Allermeisten
  • im allgemeinen
  • im Allgemeinen
  • allgemeingültig
  • allgemein gültig
  • allgemeinverständlich
  • allgemein verständlich
  • allzuoft
  • allzu oft
  • allzuviel
  • allzu viel




c  Grafiken waagerecht

Beim Experimentieren kommt gleich der nächste Gedanke auf: Wie wäre es mit einer Bildvorschau, waagerecht angezeigt und mit einer horizontalen Bildlaufleiste?




Zugegeben, hier habe ich eine wenig 'getrickst'. Damit die Grafiken nebeneinander angezeigt werden, habe ich einen zusätzlichen, inneren Div-Bereich mit entsprechender Breite definiert: 

<div style="height:133px; width:540px;
overflow-x:auto; overflow-y:hidden;
border:1px solid #000000;background-color:#DFDFDF;">
<div style="width:2000px;height:113px;">

Grafiken hier

</div>
</div>











Scrollbars mit CSS formatieren - farbige Scrollbars

die Seite 'springt' in der Horizontalen - Scrollbars erzwingen / unterdrücken

Tabellen mit Scrollbars

zur Verfügung stehende Fenstergröße berechnen

Grafik strecken fensterfüllend anzeigen

NACH OBEN