<p>i did a simple version of this before <a href='#stack-a-table-using-css-responsive'>here</a> but now im going to make it a bit more complicated and functional.</p>

<style>
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
</style>

<table id="demotable">
<thead>
<tr>
<th>Title One</th>
<th>Title Two</th>
<th>Title Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>some</td>
<td>example</td>
<td>data</td>
</tr>
<tr>
<td>some example data</td>
<td>some example data</td>
<td>some example data</td>
</tr>
<tr>
<td>some more example data</td>
<td>some more example data</td>
<td>some more example data</td>
</tr>
</tbody>
</table>

<h2>Basic Table Markup</h2>

<pre>&lt;style&gt;
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
&lt;/style&gt;

&lt;table id="demotable"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Title One&lt;/th&gt;
&lt;th&gt;Title Two&lt;/th&gt;
&lt;th&gt;Title Three&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;some&lt;/td&gt;
&lt;td&gt;example&lt;/td&gt;
&lt;td&gt;data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;some example data&lt;/td&gt;
&lt;td&gt;some example data&lt;/td&gt;
&lt;td&gt;some example data&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;some more example data&lt;/td&gt;
&lt;td&gt;some more example data&lt;/td&gt;
&lt;td&gt;some more example data&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>

<h2>Make it responsive</h2>

<pre>&lt;style&gt;
@media(max-width:800px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
display:none;
}
tr { border: 1px solid #ccc; }

td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/ Add labels /
td:nth-of-type(1):before { content: "Title One"; }
td:nth-of-type(2):before { content: "Title Two"; }
td:nth-of-type(3):before { content: "Title Three"; }
}
&lt;/style&gt;</pre>

<style>
@media(max-width:800px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
display:none;
}
tr { border: 1px solid #ccc; }

td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/ Add labels /
td:nth-of-type(1):before { content: "Title One"; }
td:nth-of-type(2):before { content: "Title Two"; }
td:nth-of-type(3):before { content: "Title Three"; }
}
</style>

<h2>Example Video</h2>
<video width="100%" height="440" preload="none" controls>
<source src="video/responsive-tables.webmvp8.webm" type="video/webm">
<source src="video/responsive-tables.mp4" type="video/mp4">
</video>

<h2>Related Links</h2>
<p><a href='http://recordit.co/8qMWDwVU85' target='blank'>Example Video</a></p>
<p><a href='https://css-tricks.com/responsive-data-tables/' target='blank'>Css Tricks</a></p>