Help:Wiki University Wikitext--Tables - Scrolling

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons

Intermediate

Advanced

Flexbox

Additional Helps

Table scrolling[edit | edit source]

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[edit | edit source]

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

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat
  • NOTICE the table expanse is way beyond the right edge of the page.

Horizontal scroll bars[edit | edit source]

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

  • Next we add the overflow:scroll" attribute to the beginning div tag.
<div style="overflow:scroll">

  • 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:

<div style="overflow:scroll; width:50%">
{| style="border:1px solid red; width:2000px"
|-
. Apples
. Peas
.
|}
</div>


Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


  • NOTICE the scroll bar on the bottom and a place for a vertical scroll bar.

Vertical scroll bar[edit | edit source]

To add a vertical scroll bar for very tall tables, just add the height attribute to the beginning div tag:

<div style="overflow:scroll; width:50%; height:100px">
{| style="border:1px solid red; Width:120% "
|-
. Apples
. Peas
. Peanuts
|}
</div>


Here is the table with both horizontal and vertical scroll bars:

Fruits Vegetable Nuts Grains
Apples Peas Peanuts Wheat
Pears Carrots Walnuts Oats
Cherries Corn Cashews Barley
Orange Beans Almonds Buckwheat


  • 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[edit | edit source]

Tests.gif
Exercises
  • 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.


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
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_Wikitext--Tables_-_Scrolling&oldid=4149418"