You know that displaying big data on a mobile screen is a daunting challenge

Still, you can not find a solid solution to make responsive HTML Table. In this article, we discuss the ways you can use to make responsive tables

When you surf the internet on your desktop computer you can see various types of tables. If you try to see these pages with tables on your mobile devices, you can see various methods being implemented to display the responsive tables.

There are not many articles on the internet regarding responsive data tables. This very nice article on CSS Tricks: Responsive Data Tables

If you can open this page on desktop and mobile devices you will be able to see the pages like below.

Responsive Tables

There are several ways to make this table responsive. We will see how we can implement it

1. Cutting Down Columns

You can use two versions of the table so you can use one version for desktop and another version for the mobile device.

In the mobile version you have to reduce the width of the table by reducing the number of columns to display.

But this method does not work for some of the tables if the data of each column is important. Because you can not hide those columns for mobile devices.

You can use a media query to hide the column of the table.

I have hidden four columns in the table using the following media query.

@media only screen and (max-width:420px) {


  table tbody tr > :nth-child(5) {
    display: none;
  }

  table tbody tr > :nth-child(6) {
    display: none;
  }

  table tbody tr > :nth-child(7) {
    display: none;
  }

  table tbody tr > :nth-child(8) {
    display: none;
  }

}

You can see the HTML page for this example in this URL- Responsive HTML Table

2. Horizontal Scroll

This is not a responsive table model but users can see the all column by scrolling the table horizontally. You can use swipe gestures to scroll on mobile devices.

This table model is also easy to use and easy to code. You just have to add CSS only to make it work.

This type of table is good to show a large number of columns.

You have to apply the following CSS to enable scrolling.

.hscroll {
  overflow-x: auto;
}

This is not suitable to show a large amount of columns.

One disadvantage of this table model is, you can not see the legends when you scroll the table

Responsive Scroll Table

3. Transformed

This is a fully responsive table layout and you can show all the data of the table on desktop, tablet and mobile device without any issue.

Set everything inside media query to display: block. You can see it first line of the CSS code

You can hide the table view by moving away from the screen or using display:none

@media only screen and (max-width:420px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  th{
    display: none;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "Name"; }
  td:nth-of-type(2):before { content: "Sunday"; }
  td:nth-of-type(3):before { content: "Monday"; }
  td:nth-of-type(4):before { content: "Tuesday"; }
  td:nth-of-type(5):before { content: "Wednesday";}
  td:nth-of-type(6):before { content: "Thursday";}
  td:nth-of-type(7):before { content: "Friday";}
  td:nth-of-type(8):before { content: "Saturday";}
}
Mobile Responsive Table

You can see the HTML page for this example in this URL- Responsive HTML Table

4. With jQuery Mobile

There are two methods to do responsive tables with jQuery Mobile called column toggle and reflow.

Mobile devices have limited space to show the tables. As a developer you can show limited columns to fit the screen but user have a popup to choose what columns he needs to see.

This method of display is called column toggle.

You can see how the table look like now

See the sample HTML code

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>jQuery Mobile</title>
	    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	</head>
	<body>

	<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
	      <thead>
	<tr>
	    <th></th>
	    <th>Sunday </th>
	    <th data-priority="1">Monday </th>
	    <th data-priority="2">Tuesday </th>
	    <th data-priority="3">Wednesday </th>
	    <th data-priority="4">Thursday </th>
	    <th data-priority="5">Friday</th>
	    <th data-priority="6">Saturday</th>
	</tr>
	     </thead>
	    <tbody>


	    <tr>
	        <td>Tim Cook</td>
	        <td>$120.00</td>
	        <td>$240.00</td>
	        <td>$320.00</td>
	        <td>$130.00</td>
	        <td>$450.00</td>
	        <td>$567.00</td>
	        <td>$170.00</td>
	    </tr>

	    <tr>
	        <td>Jeff Boss</td>
	        <td>$110.00</td>
	        <td>$340.00</td>
	        <td>$330.00</td>
	        <td>$230.00</td>
	        <td>$467.00</td>
	        <td>$746.00</td>
	        <td>$980.00</td>
	    </tr>

	    <tr>
	        <td>Steve Jobs</td>
	        <td>$110.00</td>
	        <td>$340.00</td>
	        <td>$330.00</td>
	        <td>$230.00</td>
	        <td>$467.00</td>
	        <td>$746.00</td>
	        <td>$980.00</td>
	    </tr>
	     </tbody>
	</table>

	</body>
	</html>

You have a question?

Contact Us