Creative Digital Media

History is recorded moments in life. People’s thoughts, either great among others or just great in their own shadow. Every glimpse of life at that just moment, deserves to be treasured. So just “Keep That Thought”…

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

By Templatemonster

Any time you start building a responsive website you may face some (un)expected difficulties like the one that is described in this blog post.

Once you design a responsive website it may seem a bit hard to create tables that will reflect their content adequately on all screen resolutions. Today we would like to share four simple techniques on how integrate tables into the responsive website.

Solution #1

As a rule the tables designed for desktop layout are reflected on the screens of mobile devices as it is shown on the following picture.

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

That’s pretty uncomfortable, isn’t it?

Our aim is to make the table narrower and to place the cells horizontally, here is how the code will look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 
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 { border: 1px solid #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: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	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: "Porn Name"; }
	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"; }
}

After applying this code the table will look like this:

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

There is only one drawback in such a table it gets too long for scrolling.

Click the link to see the demo, simply resize the page to see how the table columns get adjusted to the page width.

Solution #2

Now let’s have a look at the next solution, here we will make use of JavaScript and CSS, the essence is to add horizontal scroll to the table which is really comfortable because the columns do not break, no need to unnecessarily hide data.

Here is the archive with all the necessary source files including responsive-tables.js and responsive-tables.css.

After downloading all you need is to implement these files into the page’ body with the following code:

1
2
<link rel="stylesheet" href="responsive-tables.css">
<script src="stylesheet" href="responsive-tables.js"</script>

On any data table in your markup, you simply need to attach a class of .responsive and the CSS/JS will do the rest. Like this:

1
2
<table class="responsive">
  <tr> …

And you are done.

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

Hit the table to see the demo; adjust your page width to see how this method works.

Solution #3

The following method allows to convert any table into a colorful diagram with the help of JavaScript. This method will not fit all types of data, though it looks very effective.

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

Hit the link to see the demo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Responsive Tables - Chart</title>
  <style>
    /* page styles */
    body {
      font-family: Helvetica,"Helvetica Neue", sans-serif;
      font-size:62.5%;
    }
    table {
      border-collapse: collapse;
    }
    td, th { 
       text-align: center; 
       border: 1px solid #ddd; 
       padding:2px 5px; 
    }

    caption {
      margin: 0 0 .5em;
      font-weight: bold;
    }

    /*demo styles*/
    table {
      width: 100%; 
    }
    td, th { 
      font-size: 1.4em; 
      padding: .3em; 

    }
    th { background-color:#f4f4f4; } 
    caption { font-size: 1.5em;  }

Here you can download the source code of this technique.

Solution #4

Beautiful Metamorphosis: How to Turn Your Website Tables into Responsive Ones

Hit the link to see the demo.

The simplest method among other ones mentioned in this blog post. On smaller screens the table simply hides behind the spoiler saying “Tap to View”. JavaScript powered method has the following code, simple as a pie:

1
2
3
4
5
6
7
$(function(){
  $("table").click(function(){

    $("html").toggleClass( $(this).attr("class") );

  });
});

Well, these four ways are the simplest possible solution to make your tables responsive. If you have any other options don’t hesitate to share and we will gladly add them to the blog post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on August 28, 2012 by in Web Design and tagged , .