Simplified responsive table for simple data sets. Wrapped all the unnecessary styling with: // Purely aesthetic ... // end aesthetic

responsive-table.scss

@import "compass";
@mixin visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    &.focusable:active,
    &.focusable:focus {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
}

////////////////////////////////
// Purely aesthetic
body {
  font-family: "Droid Sans", "Helvetica Neue", Helvetica, Verdana, sans-serif;
}
table {
  margin: 0 auto;
  width: 80%;
  padding: 0.25em;
  border: 1px solid #ccc;
}
th, td {
  padding: 0.5em;
}
th {
  color: #ff0066;
}
// end aesthetic
////////////////////////////////

////////////////////////////////
// Small screens
////////////////////////////////

@media all and (max-width: 759px) {

// Hide table heading 
	.table-heading {
	  @include visuallyhidden;
	}
  
// Add headings :before respective columns
	td[data-col]::before {
////////////////////////////////
// Purely aesthetic
    display: inline-block;
    width: 33%;
    vertical-align: top;
    font-weight: bold;
// end aesthetic
////////////////////////////////
	  content: attr(data-col) ": \00A0";
	}
	th, td { 
	 display: block;
	}

////////////////////////////////
// Purely aesthetic
  [data-col]:nth-of-type(odd) {
    background-color: #ccc;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    color: #ff0066;
  }
// end aesthetic
////////////////////////////////
  
}

////////////////////////////////
// All screens not small
////////////////////////////////

@media all and (min-width: 760px) {

	table {
	  text-align: left;
	}
////////////////////////////////
// Purely aesthetic
	tr { 
	  &:nth-of-type(odd) {
	    background-color: #ddd;
	  }
	}
// end aesthetic
////////////////////////////////  
}

table.html

<table>
  
  <tr class="table-heading">
    <th>Heading One</th>
    <th>Heading Two</th>
    <th>Heading Three</th>
    <th>Heading Four</th>
  </tr>
  <tr>
    <td data-col="Heading One">Column 1</td>
    <td data-col="Heading Two">Column 2</td>
    <td data-col="Heading Three">Column 3</td>
    <td data-col="Heading Four">Column 4</td>
  </tr>
   <tr>
    <td data-col="Heading One">Column 1</td>
    <td data-col="Heading Two">Column 2</td>
    <td data-col="Heading Three">Column 3</td>
    <td data-col="Heading Four">Column 4</td>
  </tr>
  
</table>