jquery responsive tables

by lovromar

HTML

<table class="respond" style="display: table;">
			<thead>
				<tr>
					<th>thead1</th>
					<th>thead2</th>
					<th>thead3</th>
					<th>thead4</th>
					<th>thead5</th>
					<th>thead6</th>
					<th>thead7</th>
					<th>thead8</th>
					<th>thead9</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>row1 cell1</td>
					<td>row1 cell2</td>
					<td>row1 cell3</td>
					<td>row1 cell4</td>
					<td>row1 cell5</td>
					<td>row1 cell6</td>
					<td>row1 cell7</td>
					<td>row1 cell8</td>
					<td>row1 cell9</td>
				</tr>
				<tr>
					<td>row2 cell1</td>
					<td>row2 cell2</td>
					<td>row2 cell3</td>
					<td>row2 cell4</td>
					<td>row2 cell5</td>
					<td>row2 cell6</td>
					<td>row2 cell7</td>
					<td>row2 cell8</td>
					<td>row2 cell9</td>
				</tr>
				<tr>
					<td>row3 cell1</td>
					<td>row3 cell2</td>
					<td>row3 cell3</td>
					<td>row3 cell4</td>
					<td>row3 cell5</td>
					<td>row3 cell6</td>
					<td>row3 cell7</td>
					<td>row3 cell8</td>
					<td>row3 cell9</td>
				</tr>
			</tbody>
		</table>

CSS

/* Feel free to modify all of these styles */

body{ font-family:arial, verdana; padding:15px; }

/* Table */
table.respond{ width:100%; }
table.respond th{ background:black; color:white; font-style:italic; font-weight:bold; }
table.respond td{ padding:3px 1%; }
table.respond tr:nth-of-type(odd){ background:#ededed; }

/* Responsive Data-List */
.webks-responsive-table dt,
.webks-responsive-table dd{
	display:inline-block; /* instead use floats */
	width:73%;
	margin:0 0 1px 0;
	padding:5px 1%;
}
.webks-responsive-table dt{ 
	width:23%; 
	text-align:right; 
	background:black; 
	color:white; 
	font-style:italic;
	font-weight:bold;
	vertical-align:top;
}
.webks-responsive-table dl dd:nth-of-type(odd){ background:#ededed; }
.webks-responsive-table dl dt:nth-of-type(even){ background:#1c1c1c; }

JavaScript

$(function() {
    $('body').addClass('javascript-active');

    // ==================================================================================
    //Call responsive table function (That's all you need!)
    $('table.respond').responsiveTable({
      // Configuration example:
      displayResponsiveCallback : function() {
        return $(document).width() < 700; // Show responsive if screen width < 500px
      }
    });
    // ==================================================================================

    // -- Further possibilities for automatic switch after page has been loaded --
    // Update on Orientation Change!	  
    $(window).bind("orientationchange", function(e) {
      setTimeout("$('table.respond').responsiveTableUpdate()", 100);
    });

    // Update on Window Resize! (May be buggy in some browsers, sorry.)
    $(window).resize(function() {
      $('table.respond').responsiveTableUpdate();
    });
  });