How TO - Responsive Tables

Learn how to create a responsive table.

Responsive Tables

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

To create a responsive table, add a container element with overflow-x:auto around the <table>:

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

Tip: Go to our CSS Tables Tutorial to learn more about how to style tables.

Get started with your own server with Dynamic Spaces



Get your certification today!

make html table mobile friendly

Get certified by completing a course today!


Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Your Suggestion:

Thank you for helping us.

Your message has been sent to W3Schools.

Top Tutorials

Top references, top examples, web certificates, get certified.



Allen Kim

Apr 26, 2019


Mobile-Friendly Table

There are several ways to display <table> on mobile devices.

I found CSS-responsive table is the simplest approach to show <table> on mobile and here I want to share how it is done.

To make a long story short, these things are what I do when it is a mobile device.

More from Digital-Heart

Heart Beating In One and Zero

About Help Terms Privacy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store

Software Developer

Text to speech

make html table mobile friendly

How to Make a Table Responsive in a Few Easy Steps

How to Make a Table Responsive in a Few Easy Steps

Tables present large amounts of data in an organized and elegant way. They help you understand the data and reach correct conclusions.

Charts and tables display well on traditional computer screens. However, using a mobile device with a smaller screen can present a problem.

Data tables need a determined amount of space to display their information in a usable and readable way. They cannot constantly adjust to the limited space offered by mobile devices.

What can you do? You can make tables responsive. Responsive tables will become smaller when possible. If not possible, they can read just their format so that mobile users can still read and use them.

Like other website elements , tables should be responsive. If they are responsive, they will look good on a mobile device and provide the viewer with a pleasant experience. They should also fit within the layouts of page-building themes and plugins.

This article will discuss what it means to have responsive tables. It will also outline two ways of how to make a responsive table in WordPress.

What are Responsive Tables?

make html table mobile friendly

The whole purpose of a table is to display a lot of information in an organized way that makes sense. But when people are often disappointed when they try to view tables and charts on mobile devices.

That is because the table rows and columns are wider than the screen’s display. Viewers may try to scroll through the table, but this often ends up in frustration and confusion.

Responsive tables adjust and reformat according to the size of the screen. They can do that because designers have set breakpoint rules for the table.

So if a viewer accesses the table on a screen smaller than the breakpoint, the table will reformat itself to fit the screen size. Sometimes, this means breaking a large table into two sections. Or it might mean making other adjustments so that the data fits on the screen.

Obviously, a responsive data table is the best way to go. Unfortunately, each WordPress theme handles tables differently. Knowing how to make a table responsive regardless of the theme will help you create a better mobile user experience.

How to Make a Table Responsive Manually

make html table mobile friendly

Manually creating a responsive table requires CSS and HTML coding knowledge . Working in a staging environment is best until the table works reliably instead ofworking in a live website.

To make responsive tables, you will need three things:

Format your Table for Responsive CSS

Code credits:.

​ This bit of code: Exis | ​Original idea: Dudley Storey |

Some people use horizontally scrolling tables for mobile devices. But grouping a table’s data and eliminating the need for scrolling creates a more readable table.

The above code tells the table to reformat at a breakpoint. It is written to look for heading cells in a thead element and assign them as HTML attributes to data cells in a tbody element.

This code snippet will not work if you do not have a table with thead and tbody elements.

The next step is to add a CSS tag. With that done, the CSS will understand what it should display as a table heading in each column andthe body content.

Add a Custom CSS Tag

This bit of code: Exis | Original idea: Dudley Storey |

All themes are different. So users need to understand the structure of the theme to implement a responsive table successfully. Some themes require an additional JS library.

This example shows how to add custom CSS code. First, navigate to Appearance , then Customize , then Additional CSS . Here you can add the above custom CSS tag.

The best way to use this code is to add it to the post or page where the table appears. Insert the CSS between style tags and the JS between script tags.

After pasting the code into the editor, press Publish, so the changes take effect. Use WordPress’s screen tester to see if the code works. This built-in test feature tests the content on three different-sized screens.

Or, at the bottom of the page where you added the CSS code, click on the tablet icon to test if the table is responsive and see how it looks on a mobile device.

For those comfortable with HTML and CSS, this is an excellent solution to make a table responsive. Unfortunately, this is a challenging solution for those who are unfamiliar with coding.

If any problems were to occur, it would be difficult to troubleshoot and fix the issues. There is a much faster and easier way to create responsive table elements: by using a plugin.

A Better Way to Create Responsive Tables


If you are only going to embed a chart or table on a website once, using the code snippets above will work. But, if you are going to embed tables regularly, it is better to embed the responsive code right into the theme.

wpDataTables is a highly recommended plugin that creates tables and charts easily in WordPress. You can create, manage, customize, and style tables without any coding. And the best part is the tables are responsive.

Tables created with wpDataTables are responsive by default , no matter the data source. The tables are usable and readable on any device .

You can choose which columns should be hidden and which ones should be visible on mobile devices. You can also choose to make the hidden data available through drop-down and expandable blocks.

Creating a responsive table with wpDataTables takes three simple steps:

Create the Data Table

make html table mobile friendly

After installing and activating the plugin, a wpDataTable menu item will appear on the WordPress dashboard. Click on it. Then click on the Add New button to start creating a table.

Choose what kind of table you want. There are several options, including the following:

make html table mobile friendly

Upload your data source. After that, you can give the table a unique name. You can then edit the data attributes and customize the table elements.

make html table mobile friendly

Change the color and font styles by using the built-in editing settings. Or quickly add custom CSS into the plugin’s interface.

make html table mobile friendly

Click on the green button to finish and save the table. If you make any changes, make sure to hit the Save button before exiting the page.

Once you are done editing and customizing the table according to your needs, copy the shortcode . The table shortcode is found at the top of the screen.

Insert the Table into a Post or Page

make html table mobile friendly

Next, go to a post or page and paste the shortcode . Check out the live preview to see how the table appears on your webpage. Unless disabled, the table will be responsive and look great on any device.

You can add additional filtering options so viewers can find information quicker. wpDataTables can handle enormous tables with thousands of columns and rows. So it will undoubtedly fill your every table-making need.

Conclusion on how to make a table responsive

Whether an annual report or scientific study, tables play a vital role in data presentation and visualization. Unfortunately, most tables do not adjust to smaller screened devices.

But tables and charts do not need to look bad on a mobile device. Tables can be used on a WordPress site with a little effort and look attractive on all devices.

This guide taught two different ways to make a table responsive. The first way is by using HTML and CSS code. The second way is with the wpDataTables plugin.

wpDataTables is an advanced tool for dealing with large amounts of data. But both of these options will help you succeed in embedding a readable and usable table for a mobile device.

If you enjoyed reading this article on how to make a table responsive, you should check out this one on how to design a table .

We also wrote about a few related subjects like  how to merge cells in HTML   how to create a survey table with wpDataTables and Forminator , creating a Google Forms results graph ,  how to create a heatmap table with wpDataTables ,  DataTables alternatives ,  JavaScript table libraries , data table examples , and  WordPress pricing table  plugins.

make html table mobile friendly

How to Embed a Chart on a Website Easily With wpDataTables

Sanja Pajic

Sanja Pajic

Full Stack Web Developer

Privacy Overview

make html table mobile friendly

Eliminate HTML Tables for Better Mobile Web Apps

make html table mobile friendly

Published in:

make html table mobile friendly

Filed under:

If you're a Web developer, you know you should target your Web applications to be “mobile first.” This means that your Web applications should look great on a mobile device, and good, if not great, on a desktop browser. There are many techniques you can use to help you develop for mobile. One technique is to use Bootstrap to give yourself responsive styles that change based on the device being used. Another technique, and the focus of this article, is to eliminate HTML tables.

HTML tables, when not used correctly, can cause problems with small screens such as those found on smart phones. This article shows you how to rework your HTML tables to fit better on mobile devices. In addition, you'll learn to use Bootstrap panel classes to completely eliminate HTML tables.

The Problem with HTML Tables

HTML tables are used by many Web developers because they're easy to program, and provide a way for users to see a lot of information like they would on a spreadsheet. But just because something is easy to use and conveys a lot of data, doesn't necessarily mean it's the best tool. There are many reasons why an HTML table isn't suitable for user consumption.

HTML Table on Desktop versus Mobile

In Figure 1 , you see a list of tabular product data. This renders nicely on a normal desktop browser because the user has a lot of screen real-estate and they don't need to scroll left and right to see all the data.

Figure 1: An HTML table rendered on a desktop browser

Look at this same page rendered on a smart phone, as shown in Figure 2 . The user is only able to see the left-most column of the table. If they don't know that they can scroll to the right, they're missing some important information. On some mobile browsers, the page may render the complete table, but it's so small that it's hard to read. Either way, the user is forced to interact with their phone to view the data. They must scroll left to right, or maybe pinch or spread with their fingers.

Figure 2: The same HTML table rendered on a mobile browser

Create an MVC Project

If you wish to follow along creating the sample for this article, create a new MVC project using Visual Studio. Name the project AlternativeTable . Once you have a new MVC project, add three classes into the \Models folder . The names for each of these classes are Product , ProductManager , and ProductViewModel . Instead of using a database, create some mock data in the ProductManager class. The Product class is shown in the following code snippet:

Several lines of the ProductManager class are shown in Listing 1 . You need to add a few more Product objects into the list so you can display several rows of data. Or, see the sidebar for how to download the complete sample. You can then copy the ProductManager.cs class into the \Models folder to have several product objects to display while running this sample.

Listing 1: Create some mock data in the ProductManager class

The last class is a view model that's called from the MVC Controller. Using an MVVM approach to development provides for a nice separation of concerns in your applications. It's also very easy to bind properties in your CSHTML pages to your view model classes. The ProductViewModel class is shown in the following code snippet.

The MVC Controller

You need a MVC controller to load the data and feed that data to the CSHTML pages used to render your page of product data. Right mouse-click on the Controllers folder, select Add > Controller… Select MVC 5 Controller ? Empty from the list of templates and click the Add button. Change the name to ProductController and click the OK button. Write the following code in the Index method.

This method creates an instance of the ProductViewModel class and calls the LoadProducts method to build the Products property in the view model. The CSHTML page you are going to build uses the Products property of the View Model passed to it to build the HTML table.

The HTML Table View

Create a new folder under the \Views folder called \Product . Right mouse-click on this folder name and select Add > MVC 5 View Page with Layout (Razor) from the menu. Set the name to Index and click the OK button. When presented with a list of layouts, choose _Layout.cshtml from the dialog box and click the OK button. Write the code shown in Listing 2 .

Listing 2: Create a normal HTML table as a starting point

As you can see from Listing 2 , there's nothing out of the ordinary for this table. You use Bootstrap table classes to help with styling the table. You loop through the collection of product data in the Products property of the ProductViewModel class. Each time through the loop, display the appropriate data from the Product class in each <td> of the table. You should be able to run the application at this point and see your table of product data appear. If you wish to see what this page looks like on a smart phone, you can purchase Electric Mobile Studio 2012 from Electric Plum at .

Before you continue with this article, please copy the contents of your CSHTML page into Notepad, or save it to another file. You're going to use this Razor code later in this article.

Remove Table-Responsive Class

There's one more thing to try before you move onto the next section. Remove the attribute class=“table-responsive” from the <div> surrounding the <table> element. Re-run the application and look at the result. You should now see more of the table, but the data is now wrapped within the columns. This can give you a little more data showing in the table, but you're right back to having too much data in too little space. If you have several more columns, it also forces the user to scroll left and right to see all of the data.

Reduce Table to Two Columns

If you reduce your table to two columns, you find that it fits on a small device screen just fine (See Figure 3 and Figure 4 ). Make the changes to the page you just created by first modifying the columns in the <thead> area, as shown in the following code snippet:

You don't want to remove any of the data from your product HTML table; you just want to redistribute it into two columns. Leave the delete button in the last column, but take the code that displays the Introduction Date, Price, and URL columns and put them into the first column, as shown in the following code snippet:

This article was filed under:

This article was published in:.

make html table mobile friendly

Have additional technical questions?

Get help from the experts at CODE Magazine - sign up for our free hour of consulting!

Contact CODE Consulting at [email protected] .

make html table mobile friendly

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Make table responsive on mobile devices using HTML/CSS

I have this table that is part of a larger email. When the user's device is a mobile phone, or small screen I want the table to go from 2 columns/2 rows, to 1 column 4 rows. Would like to use the least amount of code possible.

Brian Tompsett - 汤莱恩's user avatar

4 Answers 4

Try using Bootstrap for responsive tables.

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768 px). When viewing on anything larger than 768 px wide.

Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

Amal K's user avatar

/* Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { margin: 0 0 1rem 0; } tr:nth-child(odd) { background: #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow. */ td:nth-of-type(1):before { content: "First Name"; } td:nth-of-type(2):before { content: "Last Name"; } td:nth-of-type(3):before { content: "Job Title"; } td:nth-of-type(4):before { content: "Favorite Color"; } td:nth-of-type(5):before { content: "Wars of Trek?"; } td:nth-of-type(6):before { content: "Secret Alias"; } td:nth-of-type(7):before { content: "Date of Birth"; } td:nth-of-type(8):before { content: "Dream Vacation City"; } td:nth-of-type(9):before { content: "GPA"; } td:nth-of-type(10):before { content: "Arbitrary Data"; } } <table role="table"> <thead role="rowgroup"> <tr role="row"> <th role="columnheader">First Name</th> <th role="columnheader">Last Name</th> <th role="columnheader">Job Title</th> <th role="columnheader">Favorite Color</th> <th role="columnheader">Wars or Trek?</th> <th role="columnheader">Secret Alias</th> <th role="columnheader">Date of Birth</th> <th role="columnheader">Dream Vacation City</th> <th role="columnheader">GPA</th> <th role="columnheader">Arbitrary Data</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell">James</td> <td role="cell">Matman</td> <td role="cell">Chief Sandwich Eater</td> <td role="cell">Lettuce Green</td> <td role="cell">Trek</td> <td role="cell">Digby Green</td> <td role="cell">January 13, 1979</td> <td role="cell">Gotham City</td> <td role="cell">3.1</td> <td role="cell">RBX-12</td> </tr> <tr role="row"> <td role="cell">The</td> <td role="cell">Tick</td> <td role="cell">Crimefighter Sorta</td> <td role="cell">Blue</td> <td role="cell">Wars</td> <td role="cell">John Smith</td> <td role="cell">July 19, 1968</td> <td role="cell">Athens</td> <td role="cell">N/A</td> <td role="cell">Edlund, Ben (July 1996).</td> </tr> <tr role="row"> <td role="cell">Jokey</td> <td role="cell">Smurf</td> <td role="cell">Giving Exploding Presents</td> <td role="cell">Smurflow</td> <td role="cell">Smurf</td> <td role="cell">Smurflane Smurfmutt</td> <td role="cell">Smurfuary Smurfteenth, 1945</td> <td role="cell">New Smurf City</td> <td role="cell">4.Smurf</td> <td role="cell">One</td> </tr> <tr role="row"> <td role="cell">Cindy</td> <td role="cell">Beyler</td> <td role="cell">Sales Representative</td> <td role="cell">Red</td> <td role="cell">Wars</td> <td role="cell">Lori Quivey</td> <td role="cell">July 5, 1956</td> <td role="cell">Paris</td> <td role="cell">3.4</td> <td role="cell">3451</td> </tr> <tr role="row"> <td role="cell">Captain</td> <td role="cell">Cool</td> <td role="cell">Tree Crusher</td> <td role="cell">Blue</td> <td role="cell">Wars</td> <td role="cell">Steve 42nd</td> <td role="cell">December 13, 1982</td> <td role="cell">Las Vegas</td> <td role="cell">1.9</td> <td role="cell">Under the couch</td> </tr> </tbody> </table>

View :

ggorlen's user avatar

Give below css to mobile breakpoint in your css code, and you're all done...

kostia7alania's user avatar

Try wrapping in a Div

From W3Schools -

Zion Oyemade's user avatar

Your Answer

Sign up or log in, post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service , privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged html css html-table responsive or ask your own question .

Hot Network Questions

make html table mobile friendly

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

Content by Category

Content by Application

adobe stock icon

CSS Snippets for Creating Responsive HTML Tables

The venerable HTML table may (thankfully) be long-dead in terms of its use for page layout. But it’s still going strong with regards to its original intention: displaying tabular data. They’re still incredibly useful and have been enhanced further by the likes of CSS and jQuery.

Still, large tables aren’t always a great experience on mobile screens. If not handled properly, columns can be cut off and thus unreadable. It just makes for a poor UX.

Thankfully there are techniques we can use to make tables more user-friendly on mobile devices. Let’s explore a few approaches we can take to ensure that data is accessible on every screen. We’ll also provide a working example so you can see it in action.

Horizontal Scrolling

Here’s a super easy way to give mobile users access to a very wide table. Adding a container element with the overflow-x property set to auto will allow for horizontal scrolling on small screens. Not necessarily the most elegant way to do things, but at least the content is accessible. Special thanks to W3 Schools for the concept.

Collapsible Cells with Repositioned Table Headers

This method is a little bit more user-friendly than scrolling, albeit more difficult to set up. On mobile screens, each td cell is displayed as a block , thus stacking them on top of each other. Then, using some trickery with the data-th attribute and the :before CSS selector, tables headers are essentially moved from the top row over to the left.

See the Pen Responsive Table by Geoff Yuen

Below is a slightly different take on this option. Rather than using the data-th attribute, table header items are defined via the CSS content property. While the effect is essentially the same, the requirements for maintaining code are different. This solution is probably better for smaller sites that don’t contain many tables.

See the Pen Responsive Table by Alico

Static Left Table Headers with Horizontal Scrolling

Here we see a table header ( thead ) that is setup to float:left via CSS and remain statically positioned on small screens. Rows of data are converted into columns, making for a nicely-organized table. A bit of JavaScript is used to keep the table headers the same height and alignment as the other cells.

See the Pen Responsive Tables by Jason Gross

Element Queries

Element queries focus on the sizing requirements of specific elements rather than on just the dimensions of a browser window. They’re experimental at this point, but you can read more about them at EQCSS (which also offers a JS library to utilize). In the following table example, the td cells are arranged in various column layouts. The whole thing is based on the width of table elements. This is definitely an interesting technique worth keeping an eye on.

See the Pen Responsive Tables: Grid Layout by Tommy Hodgins

Data Tables jQuery Plugin

The Data Tables jQuery plugin adds all kinds of useful functionality to standard HTML tables. And its responsive abilities are quite amazing. The script will automatically hide columns based upon screen size. The hidden data is available for viewing with a click (or touch). You also have the flexibility to give priority to specific columns. The example below shows a responsive table in all its glory.

See the Pen Responsive Table with DataTables by SitePoint

Choosing the Best Technique

The techniques above are really just a small sampling of what developers are doing with responsive tables. They range from extremely simple all the way to complicated, script-dependent concoctions.

When it comes to picking the right solution for your project, it really comes down to a few factors:

If you’re building a relatively small website that will only contain a table or two, then future maintenance might not be a big concern. But with larger sites, you’ll want to think of ways to keep everything running smoothly as new tables are added, and existing ones are changed.

For example, using a method that pulls information from a data attribute can be really effective – but also potentially difficult to maintain. This is especially so if a non-designer will be responsible for adding content. In that case, it would be worthwhile to try and automate the process of creating data attributes through PHP or other code. That way, the person responsible for content doesn’t have to worry about dealing with code.

Tables present a unique challenge for designers. They were imagined long before the mobile web came into existence. But with a little creativity, you can build a great user experience – even on the smallest of screens.

Related Posts

Related Topics

make html table mobile friendly

Oct 30, 2021


Responsive tables with HTML and CSS

Have nice looking tables on your front-end projects and score high on responsiveness.

There is a humongous amount of data that has to be collected, processed and stored these days. With that data we can calculate statistics, generate reports and get insights about our business, organization or society. One great tool that we have to show complex data in a clear and organized way to others is tables.

As front-end developers we need to find the way to optimize our projects to the different screen sizes and resolutions of devices out there. Here I’ll show an interesting way to make tables smartphone-friendly .

The main drawback

Imagine that you have an e-commerce business and you have paid for advertising on different platforms (Facebook, Instagram, etc) also your website has this fancy system that tracks these ads and gives you a monthly report of the conversion rate by platform.

It shows you this table

Wow you’re doing it pretty well but, what will happen when you check this table on your phone?

Ouch! your fancy system has a cheesy and no responsive interface. The truth is, the more columns a table has, the wider it will be and as we know scrolling horizontally stinks.

Splitting a table into two parts will make it harder to understand and unpleasant to see, your page will look weird if you rotate the table to make it fit, so what can we do?

Since mobile devices have smaller screens we have less room to play with so we need simpler layouts, a common solution is to stack up things. With that in mind we should change our table’s format.

An almost forgotten element

When was the last time you used the <dl> element? At least you’ve worked on some sort of web glossary you might not remember.

This is what the MDN site says about the Description List element:

The <dl> HTML element represents a description list…Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Interesting! specially that part about key-value pairs. If you think it well cells in a table contain data (values) structured according to the column headers (keys).

We can turn each row of the table into a <dl> , use the column headers as <dt> and the values in cells as <dd> . The list will get longer not wider (ideal for narrow screens).

Two versions of the same thing

Once we know the main downside of tables on a webpage and a possible solution for that lets see how we can make tables responsive.

Note : I’ll show you just a fragment of the markup, lists and tables require lots of it and honestly it’s quite repetitive but if you want to see the complete documents, here is the link to both the markup and the styles used in the next example.

As everybody should do I’ll start with the mobile version of the page and then I’ll move to the desktop version (mobile-first approach).

Here is the HTML for the list:

The style is up to you, but generally you would get something like this:

Now we add the table’s markup

At this point both, the list and the table are displayed on the screen, now is when we need to add an important line of CSS to the rule with the  .conversion-rate-table selector and that’s display: none;  .

With that style no space is allocated for the table making it “disappear”, a similar style like visibility: hidden; doesn’t show elements but allocate space for them so the browser will show a portion of the screen empty, like something is missing.

Now the final touch:

Here is our nice looking responsive table

Some considerations

As many other approaches in tech this one has some pros and cons. In the first place we must be aware of the extra markup as well as the extra styles we add to the page, that means more stuff to maintain. This is a small table, but imagine one with 20, 40 or 50 rows, that’s too much! we would need to add an equivalent amount of markup (and styles too) for the list.

On the other hand we offer a better user experience, even though you decide to go just with the list on mobile and desktop, users will have to scroll down if they visit your website with a laptop. We can save us a couple of scrolls (on desktop) condensing everything into a table.

Should we optimize the development process even if that means a slightly worse user experience? or Is the UX a valid reason to add more code?

This seems to be a topic for another article.

More from Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: To find UX jobs:

About Help Terms Privacy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store

Josue Granados

Web developer 💻 | JavaScript 💛 • Ruby on Rails ♦️ • Tailwind CSS 🎨

Text to speech

Responsive Data Tables

Avatar of Chris Coyier

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Garrett Dimon:

Data tables don’t do so well with responsive design. Just sayin’.

He has a good point. Data tables can be quite wide, and necessarily so. A single row of data needs to be kept together to make any sense in a table. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower.

Responsive design is all about adjusting designs to accommodate screens of different sizes. So what happens when a screen is narrower than the minimum width of a data table? You can zoom out and see the whole table, but the text size will be too small to read. Or you can zoom into the point of readability, but browsing the table will require both vertical and (sad face) horizontal scrolling.

make html table mobile friendly

So here’s what we are gonna do…

We’re going to use “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. If it is, we’re going to reformat the table.

We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. Bare bones example:

Our regular CSS is nothing special:

The small-screen responsive stuff comes in now. We’ve already figured out our minimum table width is about 760px so we’ll set up our media query to take effect when the narrower than that. Also, we’ll target iPads as they are right in that zone.

The biggest change is that we are going to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content ( :before ) to apply the label, so we know what each bit of data means.

And so, desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table:

make html table mobile friendly

Hey what about IE?

IE 9 and down don’t like you setting table elements as display: block; It does weird stuff and doesn’t work right. But IE 9 does support media queries. So my solution thus far is just to wrap the media query styles in conditional comments.

If the problem was only that older versions of IE don’t support media queries, we could use the css3-mediaqueries-js project (polyfills support for all media queries) or Respond (also polyfill, way smaller, but only does min/max-width). They both work very well. But this isn’t our problem in this case.

This all works fine in IE 10 and IE 10 also ignores conditional comments, so the styles will work even if wrapped in !IE conditionals.

There are two pages to the demo, one the responsive table solution, and a link to the non-responsive version so you can jump back and forth to see the problem.

In the demo, I use a couple of extra media queries for mobile to force the body to certain widths so they don’t get feisty. View source to snag.

This isn’t perfect…

This is just one potential solution to the problem to data tables on small screens. It’s not perfect. There may be some accessibility concerns (or maybe not, I’m really not sure). It’s likely there are some fancy JavaScript solutions that could approach things differently and also work great. If other solutions to this come along, I’ll keep this page updated.

UPDATE: Other ideas

Scott Jehl created two alternative ideas that are both very cool and very different from this. This highlights an important point: it’s all about the specific context of your data table that dictates what solution to go with.

One of them makes a pie graph from the data in the chart. On narrower screens, the pie graph shows and the table hides, otherwise only the more information-rich table shows. Arguably, the mobile version is more useful!

make html table mobile friendly

The next idea (Scott credits Todd Parker ) is to turn the table into a mini graphic of a table on narrow screens, rather than show the whole thing. This shows the user there is a data table here to be seen, but doesn’t interfere with the content much. Click the table, get taken to a special screen for viewing the table only, and click to get back.

make html table mobile friendly

Mobile First version by Derek Pennycuff.

Version that starts with divs and the labels are generated by pseudo elements and data-attributes by Mobifreaks.

Just hide non-essential stuff version by Stewart Curry

Generate mobile versions directly (without the div’s stuff) from Hannes Kirsman based on this Gist ( live demo ).

Very slick.

I find it ironic that we are now using CSS to format tables, rather then using tables to format whole entire pages.

its not ironic at all.

Tables are/were designed purely for tabular data organized into neat rows and columns. Pages are not nearly as rigid in their design, therefore tables apply rigid layout principles to a flexible design medium and that is a BAD idea.

CSS was designed to style all of the elements in a page, tables included, so its perfect for its intended function.

That fits my definition of ironic

Really great example. I was initially a bit concerned about how it’d come out, but it looks great.

I do have a question, though. I thought HTML was for (marked up) content and CSS was for style. Should there be a concern that you’ve now added content to your CSS, in the form of labels?

Isn’t this as big a sin as adding style to your HTML?

It might be a gray area…

If you were doing this:

That’s certainly sinful.

But in this case, the markup STILL HAS proper table headers, so it’s as accessible as any other data table in any other environment. We’re just hiding the headers in one place and showing them in another without changing markup.

Still, like I said, could be a gray area, I just don’t know.

Gotcha, thanks!

You can try to use “data-” attribute, to which pseudo-elements have access through content declaration:

content: attr(data-something);

Also you can give any table cell headers attribute, which is super semantic and accessible, and use them instead of data. But there is small problem – headers contains values of corresponding headers IDs. I’m not sure, if setting those ID in space separated words would be considered as a good practice (every word would be independent ID and you can pretty fast run out of ideas for different words, cause ID must be unique).

What a wonderfully elegant solution! Thanks for sharing.

Nice solution for the problem of non-readable tables on small screens. Thanks for sharing!

Idea from @chriseppstein :

Use data attributes for the cells, so content stays in HTML not in CSS:

Then CSS is more like:

Clean. Kinda microformatty.

Nice, thanks for following up on that Chris!

I’d recommend using the axis attribute since that’s supposed to define to which headers a cell’s data belongs.

This is great for multi-language websites!

Hey, I am applying this kind of responsive style to magento and I want it to propagate to all of the tables everywhere so I wrote a piece of jQuery code that will fill the data-heading(thats my attribute) with the appropriate info:

Requirements: 1. Add the class “data-table” to your data tables.. 2. Use a proper thead/tbody structure 3. Apply the needed CSS for the data-heading attribute as described

Hope this helps someone. Cheers

From @mathias — We may not need to use “only screen” as part of the media query. This stuff might apply well in other media as well, although I haven’t tested it. I’m more comfortable leaving it as screen only until I can see this being useful ON those other media.

Nice solution.

Really useful. Great Tip Chris.

P.S. I am sharing with my friends right away.

Good implementation, but a poor solution.

It’s totally unreadable as a table now. I think i’d rather scroll / turn my phone into landscape mode…

I agree but then it could depend on the table and the user’s familiarity with it.

combine this with the “next” “other” idea (the “Tap to View” model), and I think it’s a winner. You have accessible tabular information which is kept out-of-the way of the layout until called for.

Having worked with data tables in responsive designs before I know they can be a pain.

My concern with this example is that we only see the data table. Reformatting the data to fit onto a narrow screen is great in the context of this example but in the context of an entire site it can consume a lot of space and easily leave a user lost.

Fortunately there is kind of something we can do about this. Admittedly it’s not the best solution but if we want to maintain the horizontal aspect of our data table we can use overflows.

For multi-touch devices such as the iPhone and iPad you can nest your table in a div and set the div overflow to auto. As your flexible site contracts around the table the overflow property generates a scrollbar. Your iPhone or iPad wont display the scrollbar but you can now use 2 fingers to swipe the table left or right in order to display all of the data.

For those devices not fortunate enough to enjoy multi-touch Javascript can be utilized to swipe back and forth with a single touch within this div. Then again this isn’t thus I maintain this is an incomplete solution yet a different angle on the problem.

Love this!! Thanks

Two iPhones with a comment: “Both equally suck”. Priceless :D. I’ll actually read the article when I stop laughing :D

This, my friend, is quite awesome! Although I agree with the previous commentors who properly pointed out, that this solution might heavily depend on the kind of information inside the table.

Very nice example here. On the adding in content with CSS issue. In the same way you’ve hidden the elements, couldn’t you have add an extra markup and hide it while in the standard layout?

Would this make your markup not semantic since you’d have repeated data?

One of the best solution around. Im sure it will be enhanced more in the future.

wow!!! good one as usual. cheers mate.

wow, this is elegant and creative… love how it works out

Wow! this is really great!! But, would have been better if we could retain the heading bgs in the resized window as well!!

I don’t know if I agree that this is the most elegant solution. That is a LOT of vertical scrolling just to see a little data with all the visual association of a row gone. I would find that a massive pain to read.

I’ve been pondering this exact dilemma for a project I’m working on recently myself. The solution I settled on was to have a containing div set to overflow scroll. That way there is an easily visible horizontal scrollbar that does not impact the rest of the page but allows the data to retain its formatting.

10x for sharing this!

Now I want to try and find a solution :) Its a good topic, one that hasn’t really been covered yet. I wonder other solutions people will come up with

This is one of the more difficult things I’ve had to deal with lately and I’m not sure there’s a great answer quite yet.

What I did was wrapped the table in a div and set it to overflow:auto so you get a side-scroll when on a small screen, then hook up some touch detection so you can swipe/scroll the table.

Also, not the greatest way to go about it but, yea tough question to tackle.

Another approach that requires no JavaScript and no labeling (manual or scripted) is to use rainbow striping on the columns in conjunction with different-colored zebra striping on the rows.

I wrote up a pure CSS example and have a barebones working demo available if you’re interested.

Speaking as someone who doesn’t do web-dev for a living, and just likes to use proper CSS for my personal-use webpages: regardless of whether or not this is a good solution, it’s frankly awesome you can do it just with CSS.

Just posting a comment to add to your comment graph. ;-)

Wow, thanks for this! I found it really creative & helpful.

Spoon! This is a clever way to change to the every growing trend of having to view things in multi viewing formats. Once my local area gets good enough cell signal it will become more important. Yeah there are still areas in the US that do not get 4G. Come visit northern Michigan sometime.

Cheers and keep up the good work.

Kevin “Mistfit” Mist

You said “squishitude” this was a great moment.

Thanks for insight Chris, always useful. Your solution perfectly viable, pie chart equally as good. What was the other one, ah click to view table page. Could also list the titles and do a press to bring corresponding row of data into view.

All good. Cheers.

Working on a similar solution now that is looking promising that uses Chris Eppstein’s data-label solution and a potential IE fix using float:left;

It is possible to get the same layout to work even for IE8 and IE9 by adjusting the following within the media query: table, thead, tbody, th, td, tr{ display: block; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float:left; clear:left; } and then for each td within the media query setting a height, for example: 40px , and also using respond.js to get media queries to work with IE8 :)

The irony is using hand-coded CSS to specify semantic content in the :before pseudo-elements, in a manner that is incidentally not scriptable and therefore cannot be replicated proceduraly.

But the technique is pretty far sighted as far as the styles go and indicates to a large extent how form-factor-centric data markup needs to be. Ultimately this should be the result of individually selectable views for the data in question: the conversion of table to individually labelled key:value pairs. A structure may be desirable.

On the subject, a friend recently asked me how, as an information designer and front-ender, I would engineer complex automated test reports tables to display well on his smartphone when he was away from work. The answer I gave cited a more granular approach: either offer manual constraints on the scope of displayed data via queries or scripting, or offer a scripted interface which presents a very low resolution display that can be quickly expanded to offer the details of specific entries.

Sometimes the nature of the data, and its meaningfully desirable forms, mean that a small-screen display cannot adequately present it without doing a disservice to the data: sometimes, extra user effort is necessary for the data to retain ostensible relevance.

Nice! Where I work, we struggle with programmatically producing tables for print, often too wide. Something like this might apply for us. Great inspiration. Definitely agree that the format depends on the data and what you know about the reader. For example, in many contexts it would be perfectly understandable to skip the “first name”, “last name” labels, and just put the human-readable name at the top of the cell. Turn it into a kind of card view.

What happens when you have two tables on the same page? How do you apply it to just one table?

Never mind it was answered above (i.e. data attributes)

Awesome post.

We are being good boys and…

Is we addressing your audience? I think girls write CSS too.

That’s fair, I’ll change it.

I think this is for only cases when the table occupies the whole width of the page.

What about when the table is just on side of the page.(Ex: a div on left side occupying 40 % width and our table on right side with 60 %.)

I used this in the above case. Its failing in low-resolution screens.

How to solve this ….?

It was awesome example . but what if we have two tables in a single page. td:nth-of-type(1):before { content: “label for the first row of the first table”; }

i think there is no nth-of-class sort of think . so please reply how to accomplish this for more than one table in a single page

How about displaying less column and switch the column to be displayed by dragging horizontally (right/left) ?

(@sufail : uses an id selector for you different table)

hi Chris Coyier… im your fan. L) This is really good… i feel very happy :) Thanks.

I’ve implemented this for a shopping cart, the ‘position: absolute’ seems to stop the ‘quantity input’ from being changed. eg. shopper choices larger quantity and then ‘updates’ cart.

When I remove the position: absolute the products and labels center, and I want it left aligned. Left aligned doesn’t work.

Any idea on what else I can do would be much appreciated.

This is only for the mobile phone the desktop size is fine.

Cheers, it saved my Monday !

I’ve solved my problem.

So for anyone else who misses this, here’s what it was: table td { /* Behave like a “row” / border: none; / border-bottom: 6px solid green; */ position: relative; padding-left: 50%; (default 50%, I changed to 30%) }

So I changed the td to 30% and the td:before to 24%… when I put a background colour on the td: before it showed the issue plain as day.

Just kept missing something so simple.

Hope this helps someone else, I like to understand how things are working, rather than blindly copy/paste so pleased I found it.

This does not work for me, I have no idea why, spent around 14 hours trying to get it to work, cleared all styles and tried again, again, and again. I am not sure what’s causing weird problems with my tables.

This is wonderful! It doesn’t work in IE though.

I think the solution is just partway there. Works OK for this table but isn’t as considerate for future dev. I’d like to see a combination of Derek’s table but with locked headers like we do in Excel, so that the labels stay on the page and only displays one td result at a time. [Or maybe in a combination with Overflow for the results]

Derek; Mobile First version by Pennycuff. Overflow;

Here’s one example of a floating TH kinda;

Is it possible to get the table headings on their own line so that the content does not overlap on small screen sizes?

I have no experience in CSS, but could serve start this project inspired by

Is there a way to have the pseudo-labels only appear for cells that have content? I am doing a simple attendance list and my three columns are Host | Spouse | Guests. To keep the scrolling to a minimum, it would be great if the pseudo-labels did not show unless there is data.

I am pretty new to CSS but my understanding is that there is very little conditional logic that you are able to do within it.

I have 2 different charts on one page that are relational. How do i get the before td correct fo each chart? I have tried classes with different elements but it always leaves the 1st td blank.

Beautiful handy solution with minimal effort.

I’m having issues with this in a jqueryui page though. Works fine alone: Your text to link here… but doesn’t respond well here: Your text to link here…

Thoughts anyone?

I like how this reformats the table. I have several problems with it. The first is using table tags (I much prefer divs). The second is using this with dynamic pages so that all tables get formatted like this. The third is putting strings into CSS is just horrible for multi-lingual sites.

Has anyone tried using hidden elements for the column titles? Has anyone tried using divs for the structure?

A workaround for IE9 support – just float the table rows and cells:

tr, td { display: block; float: left; }

What’s the reason for the padding-right: 10px; in the td:before ? As far as I can tell this doesn’t do anything. Am I missing something?

table, thead, tbody, th, td, tr{ display: block; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float:left; clear:left; }

This code here does the trick for my IE9 problem (Thanks to Cristoffer), but IE9 crashes every time a try to restore my browser’s screen to its original size. Anyone got an idea why?

nice script – but any idea why it does not work in Windows phone?

This worked great, Chris. Best solution out there!

This worked like a charm!! Thank you so very much!

For the time being my site was done with wordpress while I hand code it.

Is there a way to keep the text-wrap working in the td once it switches to smaller screens? I’m getting long text stretching outside the table and a scrollbar after the switch. I’ve tried various word-wrap additions without success.

In your demo, dream vacation city and city name, text’s are getting overlapped when browser in minimized horizontally. How to prevent this?

make html table mobile friendly

Follow us on Facebook

Pure CSS Mobile-friendly Responsive Table

Pure CSS Mobile-friendly Responsive Table


Yet another pure CSS responsive table solution that transforms a normal html table into several separated tables in mobile view.

How to use it:

Use the  data-label attribute to specify the header for each table cell.

The core CSS styles for the responsive table view.

Responsive Table Extension For Bulma Framework

You Might Be Interested In:

3 thoughts on “ pure css mobile-friendly responsive table ”.

make html table mobile friendly

I wonder if this method still workable if one of my table column is a select tag or checkbox?

make html table mobile friendly

this is simple and direct but how to convert it to support RTL pages? thank you 🙂

make html table mobile friendly

Your website could use less ad and more content.?

Leave a Reply Cancel reply

Search Form

Responsive table generator tool.

The responsive table generator tool allows you to quickly and easily create mobile responsive tables for your UNLcms site that pass HTML5 validation and web accessibility standards. (NOTE: If your site is not in UNLcms or using the 5.0 framework you will also need to download and include the contents of this css file .)

If your site is not in UNLcms or using the 5.0 framework you will also need to download and include the contents of this css file .


  1. How to create table, using html only? for Beginner

    make html table mobile friendly

  2. how to create table use html

    make html table mobile friendly

  3. Learn HTML: How to create tables in HTML ?

    make html table mobile friendly

  4. HTML Tables Tutorial

    make html table mobile friendly

  5. Mobile-Friendly Table. There are several ways to display table…

    make html table mobile friendly

  6. Create Tables in HTML

    make html table mobile friendly


  1. How To Make Your Blogger Blog Site Mobile Friendly

  2. HTML Table and Lists

  3. HTML Table kaise Banti hai|How to make HTML Table coding

  4. Html Table

  5. how to make table in html

  6. How To Learn Html With Mobile 2023


  1. How To Create A Responsive Table

    Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java

  2. Mobile-Friendly Table

    Mobile-Friendly Table · hide <thead> · change <td> from table-cell to flex · Add a pseudo-element td::before with the contents of label attribute value.

  3. How to Make a Table Responsive in a Few Easy Steps

    A correctly formatted HTML table · A simple CSS ruleset that will trigger when a screen display shrinks below a preset width · A short bit of

  4. Eliminate HTML Tables for Better Mobile Web Apps

    The HTML Table View ... Create a new folder under the \Views folder called \Product . Right mouse-click on this folder name and select Add > MVC 5

  5. Make table responsive on mobile devices using HTML/CSS

    Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up

  6. CSS Snippets for Creating Responsive HTML Tables

    Here's a super easy way to give mobile users access to a very wide table. Adding a container element with the overflow-x property set to auto

  7. Responsive tables with HTML and CSS

    Since mobile devices have smaller screens we have less room to play with so we need simpler layouts, a common solution is to stack up things.

  8. Responsive Data Tables

    For multi-touch devices such as the iPhone and iPad you can nest your table in a div and set the div overflow to auto. As your flexible site

  9. Pure CSS Mobile-friendly Responsive Table

    Yet another pure CSS responsive table solution that transforms a normal html table into several separated tables in mobile view.

  10. HTML Responsive Table Generator Tool

    The HTML responsive table generator tool quickly and easily creates website mobile responsive tables that pass HTML5 validation and web accessibility