Data Tables

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan so that users can look for patterns and develop insights from data. Genealogists use them quite often to display information on their websites. Product information is also displayed in data tables.

How do you fit a wide data table so it is readable on a mobile screen? You can collapse the table rows so they show as separate cards.

I have been using a PVII Mobile Friendly Tables extension for Dreamweaver to create mobile friendly tables but went in search of a free solution when the question of "how to" recently came up.

Responsive Data Tables

Chris Coyier of CSS Tricks presented this solution to creating responsive data tables. No javascript required, just css.

You can read the article Responsive Data Tables which uses the sample shown below.

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Secret Alias	Date of Birth	Dream Vacation City	GPA	Arbitrary Data
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979	Gotham City	3.1	RBX-12
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968	Athens	N/A	Edlund, Ben (July 1996).
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945	New Smurf City	4.Smurf	One
Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956	Paris	3.4	3451
Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982	Las Vegas	1.9	Under the couch

Using this same solution, you can see the following examples:

• Blackbird Designs Inventory Chart
• Furniture Product List

/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}

/*
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: "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"; }
}

Complete Guide to the Table Element