bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Responsive Tables

Overview

A responsive table will display a horizontal scrollbar if the screen is too small to display the full content. Resize the browser window to see the effect:

First Name

Last Name

Points

Points

Points

Points

Points

Points

Points

Points

Points

Points

Points

Points

Jill

Smith

50 50 50 50 50 50 50 50 50 50 50 50

Eve

Jackson

94 94 94 94 94 94 94 94 94 94 94 94

Adam

Johnson

67 67 67 67 67 67 67 67 67 67 67 67

How to do it:

Formula

Wrap the < table > element in a < div > container.
Set the overflow - x property to auto for the < div > element:
Example div.tablecontainer {
overflow-x: auto;
}

Note:

In OS X Lion (on Mac), scrollbars are hidden by default and are only shown when being used (even though "overflow:scroll" is set).

More Examples

Previous

CSS Table Styling

Next

CSS The display Property