Create a Scrollable Table

Introduction

Tables are a great way to show a list of data in an easily understandable format. Many times, tables that fit well on desktop and tablet computers become in issue on smaller devices. One way of fixing this problem is to create a scrolling table.

NOTE: Resize the page in your browser to test the navigation at different viewport sizes.

What's in the Sample

Sample Sections:

  • Page Header (h1)
  • Schedule (table)

CSS Used:

  • .schedule - contains the table, sets the area to scroll within
  • .schedule-table - styles the table itself, sets a minimum width for the table

See the Pen Scrollable Table by Brenda Keller (@BLK1010) on CodePen.