Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other re: Responsive Data Tables, am I making it worse?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #34768
    bowline
    Member

    I’ve been playing around with this article (https://css-tricks.com/9096-responsive-data-tables/) and just curious if anyone had any suggestions as to whether or not I’m screwing up the dom/accessibility/standards/etc.

    It seems like for accessibility purposes, you should add an id to each th and have a “headers” attribute on td’s that point to their corresponding th’s ID (it’s a quick reference point for users to know what cell they’re looking at), e.g.




    Col OneCol Two
    R1C1R1C2

    Given that, I put together a simple little JavaScript functions that checks for a table that’s been set up this way and will create some hidden spans based on the text in the th. Then the CSS from the article kicks in with mediaqueries and will show the hidden spans if the resolution calls for it.

    The function runs once when the page loads and the CSS handles the rest of it.

    Javascript
    (please don’t judge, this was just a quick test)


    function rotateTables(){
    var colHeader = "",
    headerId = "";
    $("table tbody tr td").each(function(tdIndex, tdElement){
    headerId = $(tdElement).attr("headers");
    if (headerId != "" && headerId != undefined){
    if ($(tdElement).parents("table").hasClass("tblMobileRotate") == false && $(tdElement).parents("table").hasClass("tblNoMobileRotate") == false){
    $(tdElement).parents("table").addClass("tblMobileRotate");
    }
    }
    else{
    if ($(tdElement).parents("table").hasClass("tblMobileRotate")){
    $(tdElement).parents("table").removeClass("tblMobileRotate");
    }
    }
    });
    $(".tblMobileRotate td").each(function(tdIndex, tdElement){
    headerId = $(tdElement).attr("headers");
    if (headerId != "" && headerId != undefined){
    colHeader = $("#" + headerId).text();
    $(tdElement).prepend("" + colHeader + "");
    }
    });
    }

    CSS (from the article)
    The only changes I made here were to restrict the behavior to these tables and to add a horizontal scroll for TD’s that have nonbreaking data that’s too long.


    .mobileOnly{
    display: none;
    }
    @media only screen and (max-width: 767px) {
    .mobileOnly{
    display: inherit;
    }
    /* Force table to not be like tables anymore */
    .tblMobileRotate, .tblMobileRotate thead, .tblMobileRotate tbody, .tblMobileRotate th, .tblMobileRotate td, .tblMobileRotate tr {
    display: block;
    }
    /* Hide table headers (but not display: none;, for accessibility) */
    .tblMobileRotate thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
    }
    .tblMobileRotate tr { border: 1px solid #ccc; }
    .tblMobileRotate td {
    /* Behave like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 40%;
    overflow-x: scroll;
    }
    .tblMobileRotate .mobileHeader {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 35%;
    font-weight: bold;
    padding-right: 10px;
    white-space: nowrap;
    }
    }
Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.