Back to CSS Notes
Topic #64

Table Responsive

Responsive tables adapt to narrow screens with horizontal scrolling or stacking. On mobile, a bad table breaks an otherwise fine page.

CSS Notes · Aivasu Tech Institute2 min readSource

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

PreviousTable Styling Next CSS Display

Want to go beyond the notes?

Join Aivasu Tech Institute's CSS course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

✳ Common questions

Table Responsive – FAQs

Quick answers about learning Table Responsive in CSS.

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

Yes. Every CSS topic on Aivasu Tech Institute, including Table Responsive, is 100% free with no signup required.

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

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