Login
  • CSS
  • Table Responsive

Table Responsive

CSS Responsive Table

 

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

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

Add a container element (like

) with overflow-x:auto around the element to make it responsive:

 

Example

 

... table content ...


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

More Examples


This example demonstrates how to create a fancy table.


This example demonstrates how to position the table caption.

Test Yourself With Exercises

Exercise:

Set the border to "2px solid green" for table, th and td elements.

 
Firstname Lastname
Peter Griffin
Lois Griffin 
 

CSS Table Properties

Property Description
  Sets all the border properties in one declaration
  Specifies whether or not table borders should be collapsed
  Specifies the distance between the borders of adjacent cells
  Specifies the placement of a table caption
  Specifies whether or not to display borders and background on empty cells in a table
  Sets the layout algorithm to be used for a table
 
Table Responsive
Login
ADS CODE