Demo: Simple Solution for Responsive Tables

Quick solution for responsive tables that doesn't require JS. Browser support needs further testing.

A Heading A Longer Heading A Really Really Really Long Heading A Really Really...Oh Hell I Think You Get It.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="table-container">
	<table class="data-table">
		<thead>
			<tr>
				<th>A Heading</th>
				<th>A Longer Heading</th>
				<th>A Really Really Really Long Heading</th>
				<th>A Really Really...Oh Hell I Think You Get It.</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
			</tr>	
			<tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
			</tr>	
            <tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
			</tr>	
            <tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
			</tr>	
            <tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
			</tr>	
		</tbody>
	</table>
</div>
/* The important stuff */
.table-container{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 900px){
    .table-container {
    	overflow: visible;
    }
}


/* Making it pretty */
body{ 
    padding: 1em; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    color: #222;
}
table{ 
    border-collapse: collapse; 
    border-spacing: 0; 
    background-color: white;
    width: 100%;
    border: 1px solid #c3c9cc;
}
th, td{
    padding: 1em 0.75em;
    text-align: left;
}
th{
    background-color: #f5f5f5;
    white-space: nowrap;
}
td{
    border-top: 1px solid #c3c9cc;
}