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.