There are lots of other methods out there, some use javascript solutions to keep the essence of a table in tact and adjusting based on window width but this sollution is one of the easier to implement.
The concept to make a table responsive is very basic, they key is understanding html elements. a div is a block level element, a span is not, its an inline element. A table is a table element, some CSS hacks or IE fixing solutions will have you set div elements as table or table cell elements through display:table; for example.
You can do this in reverse, if you convert all your table elements into block level, then apply some table styles as you need to, maybe use the :before to add the titles back in, hide or show the header.... It allows you to create a nice responsive table solution
The Html
You can add your custom style classes to your tables as well, not use a class and have the CSS run by default on all tables, or target a table based on its existing class or ID, or... Add your own.
<table class="responsive-table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Liam</td>
<td>Dilley</td>
<td>Website Guru</td>
</tr>
<tr>
<td>Adam</td>
<td>Broadway</td>
<td>Legend</td>
</tr>
</tbody>
</table>
The CSS
Place this within your CSS media query code.
/* ============ RESPONSIVE TABLE ============= */
/* Force table to not be like tables anymore */
table.responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive-table tr { border: 1px solid #ccc; }
.responsive-table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.responsive-table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
.responsive-table td:nth-of-type(1):before { content: "First Name"; }
.responsive-table td:nth-of-type(2):before { content: "Last Name"; }
.responsive-table td:nth-of-type(3):before { content: "Job Title"; }