<div class="row">
<div class="column large-12">
<h3>Responsive Table</h3>
<h4>Resize to see how responsiveness is handled. </h4>
<div class="show-for-small-only">
<!-- 'show-for-small-only' is a utility class for the foundation 6 framework which only displays on small view ports -->
<table>
<caption>WP Notes Widget PRO Launched</caption>
<tbody>
<tr>
<th>Post Date</th>
<td>November 1, 2017</td>
</tr>
<tr>
<th>Post Status</th>
<td>publish</td>
</tr>
<tr>
<th>Post Type</th>
<td>post</td>
</tr>
<tr>
<th>Featured Image</th>
<td><img src="http://webrockstar.net/wp-content/uploads/edd/2017/10/wp-notes-widget-banner-772x250.jpg" ></td>
</tr>
</tbody>
</table>
<table>
<caption>Responsive HTML Tables</caption>
<tbody>
<tr>
<th>Post Date</th>
<td>October 7, 2017</td>
</tr>
<tr>
<th>Post Status</th>
<td>publish</td>
</tr>
<tr>
<th>Post Type</th>
<td>
post </td>
</tr>
<tr>
<th>Featured Image</th>
<td><img src="http://webrockstar.net/wp-content/uploads/2017/10/poppin_loft_adjustable_height_standing_whitetop_1-e1507404680129-640x229.jpg" ></td>
</tr>
</tbody>
</table>
<table>
<caption>Coming Soon – WP Note Widget PRO!</caption>
<tbody>
<tr>
<th>Post Date</th>
<td>September 8, 2017</td>
</tr>
<tr>
<th>Post Status</th>
<td>publish</td>
</tr>
<tr>
<th>Post Type</th>
<td>
post </td>
</tr>
<tr>
<th>Featured Image</th>
<td><img src="http://webrockstar.net/wp-content/uploads/2017/02/wp-notes-widget-772x250-640x207.jpg" ></td>
</tr>
</tbody>
</table>
<table>
<caption>RegEx for North American Phone Number</caption>
<tbody>
<tr>
<th>Post Date</th>
<td>August 30, 2017</td>
</tr>
<tr>
<th>Post Status</th>
<td>publish</td>
</tr>
<tr>
<th>Post Type</th>
<td>
post </td>
</tr>
<tr>
<th>Featured Image</th>
<td></td>
</tr>
</tbody>
</table>
<table>
<caption>Create a Good Web Presence for Free in Under 2 Hours</caption>
<tbody>
<tr>
<th>Post Date</th>
<td>July 29, 2017</td>
</tr>
<tr>
<th>Post Status</th>
<td>publish</td>
</tr>
<tr>
<th>Post Type</th>
<td>
post </td>
</tr>
<tr>
<th>Featured Image</th>
<td><img src="http://webrockstar.net/wp-content/uploads/2017/07/website-background-crop-640x272.jpg" ></td>
</tr>
</tbody>
</table>
</div>
<div class="hide-for-small-only">
<!-- 'show-for-small-only' is a utility class for the foundation 6 framework which only displays on view ports larger than small -->
<div class="" style="max-width: 100%;overflow-x: auto;">
<table>
<thead>
<tr>
<th>Title</th>
<th>Post Date</th>
<th>Post Status</th>
<th>Post Type</th>
<th>Featured Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>
WP Notes Widget PRO Launched </td>
<td>
November 1, 2017 </td>
<td>
publish </td>
<td>
post </td>
<td>
<img src="http://webrockstar.net/wp-content/uploads/edd/2017/10/wp-notes-widget-banner-772x250-400x130.jpg" > </td>
</tr>
<tr>
<td>
Responsive HTML Tables </td>
<td>
October 7, 2017 </td>
<td>
publish </td>
<td>
post </td>
<td>
<img src="http://webrockstar.net/wp-content/uploads/2017/10/poppin_loft_adjustable_height_standing_whitetop_1-e1507404680129-768x275.jpg" > </td>
</tr>
<tr>
<td>
Coming Soon – WP Note Widget PRO! </td>
<td>
September 8, 2017 </td>
<td>
publish </td>
<td>
post </td>
<td>
<img src="http://webrockstar.net/wp-content/uploads/2017/02/wp-notes-widget-772x250-768x249.jpg" > </td>
</tr>
<tr>
<td>
RegEx for North American Phone Number </td>
<td>
August 30, 2017 </td>
<td>
publish </td>
<td>
post </td>
<td>
</td>
</tr>
<tr>
<td>
Create a Good Web Presence for Free in Under 2 Hours </td>
<td>
July 29, 2017 </td>
<td>
publish </td>
<td>
post </td>
<td>
<img src="http://webrockstar.net/wp-content/uploads/2017/07/website-background-crop-640x272.jpg" > </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
img {
width:100%;
max-width: 300px;
}
table {
caption {
margin-top:2rem;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.