Responsive Data Tables

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?

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.

The Markup

<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Category</th>
<th>Items</th>
<th>Original Price</th>
<th>Reducted Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Education Software</td>
<td>200 pcs</td>
<td>$200.00 each</td>
<td>$180.00 each</td>
</tr>
<tr>
<td>Accounting Software</td>
<td>50 pcs</td>
<td>$500.00 each</td>
<td>$400.00 each</td>
</tr>
<tr>
<td>Computer HDD</td>
<td>50 pcs</td>
<td>$300.00 each</td>
<td>$290.00 each</td>
</tr>
</tbody>
</table>

Regular CSS

table{ width: 100%; border-collapse: collapse;}
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;}

The small-screen responsive stuff comes in now.

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px){
/* Force table to not be like tables */
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; }
 
/* Behave  like a "row" */
td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;}
 
/* Now like a table header */
td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
 
/* Label the data */
td:nth-of-type(1):before { content: "Category"; }
td:nth-of-type(2):before { content: "Items"; }
td:nth-of-type(3):before { content: "Original Price"; }
td:nth-of-type(4):before { content: "Reducted Price"; }
}

Full code and working example – all in the Demo / Download

Conclusion

Desktops get the regular table experience, mobile (or otherwise small screens) get a reformatted and easier to explore table.

Leave a Reply

Your email address will not be published. Required fields are marked *