<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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.