Help:Wiki University Wikitext--Tables - Scrolling





<< Previous Chapter Next Chapter >>

Table scrolling
Look at the extreme right edge of this page. Do you see a vertical scroll bar? The vertical scroll bar enables you to scroll the content this page up or down. Now look at the bottom of your screen. Do you see a horizontal scroll bar? The horizontal scroll bar enables you to scroll to the far right side of this page. Occasionally you may want to insert a very large table that may be too long or too wide or both to see all of it on a page. To make these large tables useful you can create scroll bars which behave just like the one you see on this page.

Scrolling bars
Let's pretend that our demonstration table is 2000 pixels wide. Here's what it looks like:


 * NOTICE the table expanse is way beyond the right edge of the page.

Horizontal scroll bars
   {| style="border:1px solid red; width:2000px"  |- | Apples | Peas. . . |}
 * First step is to encase the table between opening and closing div tags:

 
 * Next we add the overflow: scroll" attribute to the beginning div tag.
 * However since the table is so wide, we need to limit the table to the size we want it. Here we add a width attribute, in addition:

Let's add the scrolling and width attribute to the beginning div tag. We will limit the width of the table to 50%: Here is the coding:  
 * NOTICE the scroll bar on the bottom and a place for a vertical scroll bar.

Vertical scroll bar
To add a vertical scroll bar for very tall tables, just add the height attribute to the beginning div tag:   Here is the table with both horizontal and vertical scroll bars:
 * NOTICE: we now have active scroll bars horizontally and vertically.


 * BEWARE:
 * The width attribute used in the DIV-tag must be LESS THAN that in the TABLE-tag; and
 * the height attribute used in the DIV-tag must be LESS THAN that in the TABLE-tag or the table height; else
 * your horizontal or vertical scroll bars will not work.

Try these out


 Exercises Check your answers
 * Take our demonstration table and make it 900 pixels wide and tall.
 * Then make the table scrollable both horizontally and vertically with a finish width and height of 400 pixels.

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * When creating the horizontal scroll bar, you do not have to set the width.
 * A. True
 * B. False


 * Vertical scroll bars are only useful for very tall tables.
 * A. True
 * B. False


 * You cannot have horizontal and vertical scroll bars at the same time.
 * A. True
 * B. False

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>