Responsive Tables

Sometimes we have tabular data that do not go along well with mobile by default.

One of the approaches can be putting tables in a wrapper DIV to make them scroll horizontally on smaller devices as proposed by Bootstrap. But I’m not a big fan of it as the scrollbars are almost hidden on mobile devices and there are chances that user oversight them.

The other approach is to change the display of table on small device to display entire data on screen without scrollbar and that is what I’m going to demonstrate now. To accomplish that, I used the one of the underused CSS property content: attr(value string).

Once in a project I used Bootstrap and the first two columns exact fit on screen giving impression that the table had two columns only. The client complained that table was getting truncated on mobile device. There was scrollable table but it appeared that table is cut off as scrollbar was invisible until you scroll (and I’m talking about iPhone!)

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.attr(X) returns the value of the element’s attribute X as a string. If there is no attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
Mozilla Developer Network

The basic notion is that on small screen display TR and TD as block element and hide table header; whereas on large screens show normal table. To make data context clear, prefix column titles before the content and that is where the content CSS property is used. Statically, we can add data-th="title" in each td, but to make it easy-to-use, I wrote a small jQuery script that read the title of the column and then add data-th in TDs.

Resize the window to see the behavior of table below:

See the Pen Responsive Table by Mohd Ovais (@ovais) on CodePen.

.rwd-table {
	border-collapse:collapse;
	border: none;
}
.rwd-table tr {
	display: block;
	padding: 1em 0;
    border-bottom: 1px solid #6D86AE;
}
.rwd-table thead,
.rwd-table th {
	display: none;
    padding: 0.25em 0.5em;
}
.rwd-table td {
	display: block;
    padding: 0.25em 0.5em;
}

.rwd-table td:before {
	content: attr(data-th) ": ";
	font-weight: bold;
    color: #6D86AE;
}

@media (min-width: 481px) {
	.rwd-table thead{
		display: table-header-group;
        background-color: #6D86AE;
        color: #fff;
	}
	.rwd-table tr {
		display: table-row;
	}
	.rwd-table td:before {
		display: none;
	}
	.rwd-table th, .rwd-table td {
		display: table-cell;
	}
    tr:nth-child(even) {
        background: #F7F6F3
    }
}
$(document).ready(function () {
    $('.rwd-table').each(function (i, table) {
        var self = $(table);
        var arr_th = [];
        self.find('thead th').each(function (i, th) {
            arr_th.push(th.innerHTML);
        });

        self.find('tbody tr').each(function (i, tr) {
            $(tr).find('td').each(function (i, td) {
                $(td).attr('data-th', arr_th[i]);
            });
        });
    });
});
<table class="rwd-table"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></thead><tbody><tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>$1,200,000</td></tr><tr><td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><td>2010/06/09</td><td>$725,000</td></tr><tr><td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$675,000</td></tr><tr><td>Fiona Green</td><td>Chief Operating Officer (COO)</td><td>San Francisco</td><td>48</td><td>2010/03/11</td><td>$850,000</td></tr><tr><td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>27</td><td>2011/01/25</td><td>$112,000</td></tr><tr><td>Serge Baldwin</td><td>Data Coordinator</td><td>Singapore</td><td>64</td><td>2012/04/09</td><td>$138,575</td></tr><tr><td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>$98,540</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>$114,500</td></tr></tbody></table>
  1. Raghvandra

    Very nice concept. You are great!!!!

Leave a Reply

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