Table Responsive

CSS Responsive Tables

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:

Wrap the

element in a

container.

Set the overflow-x property to auto for the

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

This example demonstrates how to create a fancy table.

This example demonstrates how to add, and position a table caption.

CSS Table Properties

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

Table Responsive – FAQs

Quick answers about learning Table Responsive in CSS.

What does this Table Responsive note cover?

This free note from CodingNow 2.0 explains Table Responsive in CSS — concept, syntax and worked code examples you can copy, run and revise before interviews.

Is this Table Responsive tutorial free?

Yes. Every CSS topic on CodingNow 2.0, including Table Responsive, is 100% free with no signup required.

How long does it take to learn Table Responsive?

With focused practice, most students grasp Table Responsive in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.

Where can I practise Table Responsive after reading?

Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.