A CodePen by dani-z. Un-doing tables - A simple take on un-doing tables. Most of the SASS stuff is just there to make it look nice. The meat is at the bottom.

index.html

<table>
	<thead>
		<tr>
			<th scope="col">Name</th>
			<th scope="col">Email</th>
			<th scope="col">Dept, Title</th>
			<th scope="col">Phone</th>
		</tr>
	</thead>
  <tbody>
    <tr class="vcard">
			<th scope="row" class="n" data-title="Name">
				<b class="family-name">Smith</b>,
				<b class="given-name">Laura</b>
			</th>
			<td data-title="Email"><a class="email" href="mailto:[email protected]">[email protected]</a></td>
			<td data-title="Dept, Title">						Biology, Director</td>
			<td class="tel" data-title="Phone">						<a href="tel:+1123456789">123-456-789</a></td>
		</tr>
		<tr class="vcard">
			<th scope="row" class="n" data-title="Name">
				<b class="family-name">Johnson</b>,
				<b class="given-name">Ron</b>
			</th>
			<td data-title="Email"><a class="email" href="mailto:[email protected]">[email protected]</a></td>
			<td data-title="Dept, Title">						Purchasing, Director</td>
		  <td class="tel" data-title="Phone">						<a href="tel:+11234567891">123-456-7891</a></td>
		</tr>
	</tbody>
</table>

style.scss

@import "compass";
@import "compass/typography/vertical_rhythm";

$font-size-default: 16px;
$font-size-body: 15px;
$font-size-section-heading: 20px;
$font-size-article-heading: 17px;
$break-4: 768px;
$font-stack-sansserif: Helvetica, Arial, sans-serif;
$font-stack-serif: Georgia, Cambria, Garamond, "Apple Garamond", serif;
$font-stack-section-heading: $font-stack-sansserif;


// convert px to ems
@function px-to-ems( $pixels, $context: $font-size-default ) {
  @return #{$pixels/$context}em;
}

// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
  }
  clip: rect(1px, 1px, 1px, 1px);
}

body {
  padding: 1em;
}

table {
	border-style: none;
	border-top-width: 0;
	width: auto;
	tr {
		border-style: none;
		border-bottom-width: 0;
	}
	th, td {
		border-style: none;
		padding-right: 1em;
		@include padding-leader(.5);
		@include padding-trailer(.5);
		text-align: left;
		min-width: 50px;
		vertical-align: top;
		&.tool {
			padding: 0 1em;
		}
	}
	th + th,
	th + td,
	td + th,
	td + td {
		border-left-width: 1px;
	}
	thead tr:last-child {
		border-bottom-width: 2px;
	}
	thead th,
	tr.index th {
		@include adjust-font-size-to( $font-size-article-heading, 1, $font-size-body );
        font-family: $font-stack-section-heading;
		font-weight: bold;
		line-height: 1.25;
		text-transform: uppercase;
	}
	thead th {
	    border-bottom: 1px solid;
	    padding-bottom: .25em;
	}
	tr.index th {
	    @include adjust-font-size-to( $font-size-section-heading, 1, $font-size-body );
	}
	tbody:first-of-type tr.index th {
	    padding-top: 1em;
	}
	tbody th {
	    font-weight: normal;
	}
}

// undo tables for small screens
// $break-4 is the px-width break at which you want to cut it off
@media (max-width: px-to-ems($break-4 - 1px)) {
  
  // make each table separate from other ones
  table {
		border: 0;
		@include trailing-border;
		padding-bottom: 0;
		display: block;
		width: 100%;
		
    // make sure captions are displayed
    caption {
			display: block;
		}
    
    // wipe the thead from the face of the earth, modern screen readers will expose the generated content
		thead {
			display: none;
      visibility: hidden;
		}
    
    /*
     * make everything display block so it 
     * aligns vertically
     */
		tbody, tr, th, td {
			border: 0;
			display: block;
			padding: 0;
			text-align: left;
		  white-space: normal;
		}
    
    // give each row a little space
		tr {
			@include trailer;
		}
    
    /* Labeling
     * adding a data-title attribute to the cells
     * lets us add text before the content to provide
     * the missing context
     * 
     * Markup: 
     *   <td data-title="Column Header">Content Here</td>
     * 
     * Display:
     *   Column Header: Content Here
     */
		th[data-title]:before,
		td[data-title]:before {
			content: attr(data-title) ":\00A0";
			font-weight: bold;
		}
		th:not([data-title]) {
			font-weight: bold;
		}
    
    // hide empty cells
		td:empty {
		    display: none;
		}
	}
}