Responsive table

by Ali Khaled

HTML

<table class="responsive">
	<tbody>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
			<th>Header 5</th>
			<th>Header 6</th>
			<th>Header 7</th>
			<th>Header 8</th>
		</tr>
		<tr>
			<td>row 1, cell 1</td>
			<td>row 1, cell 2</td>
			<td>row 1, cell 3</td>
			<td>row 1, cell 4</td>
			<td>row 1, cell 5</td>
			<td>row 1, cell 6</td>
			<td>row 1, cell 7</td>
			<td>row 1, cell 8</td>
		</tr>
		<tr>
			<td>row 2, cell 1</td>
			<td>row 2, cell 2</td>
			<td>row 2, cell 3</td>
			<td>row 2, cell 4</td>
			<td>row 2, cell 5</td>
			<td>row 2, cell 6</td>
			<td>row 2, cell 7</td>
			<td>row 2, cell 8</td>
		</tr>
		<tr>
			<td>row 3, cell 1</td>
			<td>row 3, cell 2</td>
			<td>row 3, cell 3</td>
			<td>row 3, cell 4</td>
			<td>row 3, cell 5</td>
			<td>row 3, cell 6</td>
			<td>row 3, cell 7</td>
			<td>row 3, cell 8</td>
		</tr>
		<tr>
			<td>row 4, cell 1</td>
			<td>row 4, cell 2</td>
			<td>row 4, cell 3</td>
			<td>row 4, cell 4</td>
			<td>row 4, cell 5</td>
			<td>row 4, cell 6</td>
			<td>row 4, cell 7</td>
			<td>row 4, cell 8</td>
		</tr>
	</tbody>
</table>

<ul class="wrapper">
    <li class="header">
        <span>Position</span><span class="wide">Team</span><span>Played</span><span>Won</span><span>Lost</span><span>Difference</span><span>Points</span>
    </li>
    <li style="color: rgb(255, 0, 0);">
        <span>1</span><span class="wide">Luke/Mike</span><span>6</span><span>4</span><span>2</span><span>14</span><span>8</span></li>
    <li>
        <span>2</span><span class="wide">Stefan/Kerri</span><span>6</span><span>4</span><span>2</span><span>12</span><span>8</span>
    </li>
    <li>
        <span>3</span><span class="wide">Kevin/Mark</span><span>3</span><span>3</span><span>0</span><span>27</span><span>6</span>
    </li>
    <li>
        <span>4</span><span class="wide">Nolan/Dan</span><span>5</span><span>3</span><span>2</span><span>5</span><span>6</span>
    </li>
    <li>
        <span>5</span><span...

CSS

/*	--------------------------------------------------
	:: Lists
	-------------------------------------------------- */
	ul, ol { margin-bottom: 18px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	li { margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	

/*	--------------------------------------------------
	:: Tables
	-------------------------------------------------- */
	table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd;  }
	
	table thead, table tfoot { background: #f5f5f5; }
	table thead tr th,
	table tfoot tr th,
	table tbody tr td,
	table tr td,
	table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; }
	table thead tr th,
	table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
	table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
	table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }

	table tbody tr.even,
	table tbody tr.alt { background: #f9f9f9; }
	table tbody tr:nth-child(even) { background: #f9f9f9; }
	table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }

/* -------------------------------------------------- 
	:: Misc
---------------------------------------------------*/
	.left        { float: left; }
	.right       { float: right; }
	.text-left   { text-align: left; }
	.text-right  { text-align: right; }
	.text-center { text-align: center; }
	.hide        { display: none; }
	.highlight   { background: #ff0; }
	
/* Responsive */

table th { font-weight: bold; }
table td, table th { padding: 9px 10px; text-align: left; }

/* Mobile */
@media only screen and (max-width: 767px) {
	
	.responsive { margin-bottom:...

JavaScript

/* responsive tables */
$(document).ready(function() {
    var switched = false;
    var updateTables = function() {
        if (($(window).width() < 767) && !switched) {
            switched = true;
            $("table.responsive").each(function(i, element) {
                splitTable($(element));
            });
            return true;
        } else if (switched && ($(window).width() > 767)) {
            switched = false;
            $(".responsive").each(function(i, element) {
                unsplitTable($(element));
            });
        }
    };
    $(window).load(updateTables);
    $(window).bind("resize", updateTables);

    function splitTable(original) {
        original.wrap("<div class='table-wrapper' />");
        var copy = original.clone();
        copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
        copy.removeClass("responsive");
        original.closest(".table-wrapper").append(copy);
        copy.wrap("<div class='pinned' />");
        original.wrap("<div class='scrollable' />");
    }

    function unsplitTable(original) {
        original.closest(".table-wrapper").find(".pinned").remove();
        original.unwrap();
        original.unwrap();
    }
});