Responsive Data Tables
Original NPR Article
Making Data Tables Responsive (5/9/2014).
Summary
Wide (many-column) tables have problems being displayed on mobile devices, since they're often wider than the screen. The solution NPR presents allows tables to be linearized on small screens, so you can scroll down through the data, rather than left and right.
Dynamic Assignment of Column Header Values
In implementing this, one thing I added was a dynamic assignment of the column header value based on the th tag. The following jQuery snippet adds the data-title attribute that the CSS depends on, rather than hard-coding those into the HTML:
/* Dynamically add 'data-title' property to responsive tables */ jq(document).ready( function() { var column_headers = []; jq('#content table.responsive th').each( function() { column_headers.push(jq(this).html()); } ) jq('#content table.responsive tr').each( function() { var children = jq(this).children('td'); if (children.size()) { for (var i=0; (i<column_headers.length && i < children.size()); i++) { jq(children[i]).attr('data-title', column_headers[i]); } } } ) } );
Accessibility Concerns
My understanding is that screenreaders will not read items that are hidden via a "display: none;" CSS rule. Therefore, I changed the CSS for the thead in the above article to:
table.responsive thead { margin: -1px 0 0 -10000px !important; padding: 0 !important; position: absolute; }
This will position the table header "off-screen", rather than hiding it, so screen readers will read it. In looking into screen reader treatment of CSS generated content (e.g. the ":before" and ":after") it appears that some will read it and some won't. Therefore, it seems more accessible to leave the table header visible to screen readers.