Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

table responsive
css
communitycreator

How to create a responsive table in CSS

AKASH BAJWA

Overview

Responsive web design rescales itself depending on the device. The primary reason to make an element or container responsive is to add to the user experience. In this shot, we'll discuss using CSSCascading Style Sheets to make a table responsive.

Responsiveness helps to improve the readability of the user. In CSS, we use overflow-x, a commonly known property for responsive table design. We may use this to add a scroll bar or slice the data to adjust the readability of the tables.

Syntax

The primary method of making a responsive table is to add a class table table-responsive inside the table tag.

<table class= "table table-responsive">

To make a table responsive, we wrap the whole table inside a container tag like div with property overflow-x equals to auto.

<div style="overflow-x:auto;">

Example

In the code snippet, we have a table that contains multiple columns and rows. By applying CSS overflow-x:auto style, table become device responsive for better user experience.

  • HTML
Example

Explanation

  • Line 18: Opening a div and assigning a style value overflow-x=auto. This tells the reader to add a scroll bar to the table when needed. This makes it readable and visible for the end-users across different screen sizes.

You can also adjust the readability of the table by mentioning specific screen sizes through the @media query.

RELATED TAGS

table responsive
css
communitycreator
RELATED COURSES

View all Courses

Keep Exploring