Responsive data tables

http://mobifreaks.com/coding/responsive-data-tables-jquery/

by gmclelland

HTML

<div id=content>
<table>
        <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Fictional Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Lettuce Green</td>
            <td>Trek</td>
            <td>Digby Green</td>
            <td>January 13, 1979</td>
            <td>Gotham City</td>
            <td>3.1</td>
            <td>RBX-12</td>
        </tr>
        <tr>
          <td>The</td>
          <td>Tick</td>
          <td>Crimefighter Sorta</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>John Smith</td>
          <td>July 19, 1968</td>
          <td>Athens</td>
          <td>N/A</td>
          <td>Edlund, Ben (July 1996).</td>
        </tr>
        <tr>
          <td>Jokey</td>
          <td>Smurf</td>
          <td>Giving Exploding Presents</td>
          <td>Smurflow</td>
          <td>Smurf</td>
          <td>Smurflane Smurfmutt</td>
          <td>Smurfuary Smurfteenth, 1945</td>
          <td>New Smurf City</td>
          <td>4.Smurf</td>
          <td>One</td>
        </tr>
        <tr>
          <td>Cindy</td>
          <td>Beyler</td>
          <td>Sales Representative</td>
          <td>Red</td>
          <td>Wars</td>
          <td>Lori Quivey</td>
          <td>July 5, 1956</td>
          <td>Paris</td>
          <td>3.4</td>
          <td>3451</td>
        </tr>
        <tr>
          <td>Captain</td>
          <td>Cool</td>
          <td>Tree Crusher</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>Steve 42nd</td>
          <td>December 13, 1982</td>
          <td>Las Vegas</td>
         ...

CSS

/* your custom CSS \*/
</style>
<!-- access to the HEAD element, you must use this in the CSS panel
http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>

body{
padding:10px;
}

.label{
font-weight:bold;
}


/* seo friendly tables */
.table{
    display:table;    /* Defines a Table */
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    border-bottom:2px solid #dddddd;
    color:#8d8d8d;
    margin:10px 0;
}
.table-head{
     display: table-header-group; /* Defines a table header group */
}
.table-head .column{ /* Column inside the table-head */
    background:#333333;
    color:#7d7d7d;
    border-right:1px solid #5d5d5d;
    border-bottom:none;
}
.table-head .column:hover{ /* Column hover inside the table-head */
    background:#222222;
}
.row{
    display:table-row; /* Defines a table row */
}
.row .column:nth-child(1){ /* First column in a row */
    border-left:1px solid #eeeeee;
}
.row:last-child .column{  /* column in a last row */
    border-bottom:none;
}
.column{
    display:table-cell; /* Defines a table cell */
    padding:10px 20px;
    border-bottom:1px solid #eeeeee;
    border-right:1px solid #eeeeee;
}
.column:hover{
    background:#f9f9f9;
}
/* Responsive table */
@media all and (max-width: 640px){
    .odd_rows{
      color:white;
      background-color:#222222;
    }

    .odd_rows .column:hover{
      background:#3F3D3D;
    }

    .table,
    .row,
    tbody,
    .column,
    .column:before{
        display:block;    /* Converts a table, table row, table column and table column:before into a block element */
    }
    .table,
    .row .column:last-child{
        border-bottom:none;
    }
    .table-head{
        position:absolute;    /* Hides table head but not using display none */
        top:-1000em;
        left:-1000em;
    }
    .row{
        border:1px solid #eeeeee;
        border-top:2px solid #dddddd;
       ...

JavaScript

// counts total number of td in a head so that we can can use it for label extraction
    var head_col_count =  $('thead th').size();
    // loop which replaces td
    // could be replaced with
    // http://www.erichynds.com/javascript/javascript-loop-performance-caching-the-length-property-of-an-array/
    for ( i=0; i <= head_col_count; i++ )  {
        // head column label extraction
        var head_col_label = $('thead th:nth-child('+ i +')').text();
        // replaces td with <div class="column" data-label="label">
        $('tr td:nth-child('+ i +')').replaceWith(
            function(){
                return $('<div class="column" data-label="'+ head_col_label +'">').append($(this).contents());
            }
        );
    }    
    // replaces table with <div class="table">
    $('table').replaceWith(
        function(){
            return $('<div class="table">').append($(this).contents());
        }
    );    
    // replaces thead with <div class="table-head">
    $('thead').replaceWith(
        function(){
            return $('<div class="table-head">').append($(this).contents());
        }
    );    
    // replaces tr with <div class="row">
    $('tr').replaceWith(
        function(){
            return $('<div class="row">').append($(this).contents());
        }
    );    
    // replaces th with <div class="column">
    $('th').replaceWith(
        function(){
            return $('<div class="column">').append($(this).contents());
        }
    );

// Odd and Even Classes
$('.row:nth-child(even)').addClass('odd_rows');