<table class="responsivegene">
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Issue Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Issue Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>
table.responsivegene {border: 1px solid #ccc;width: 100%;margin:0;padding:0;border-collapse: collapse;border-spacing: 0; }
table.responsivegene tr {border: 1px solid #ddd;padding: 5px; }
table.responsivegene th, table td { padding: 10px;text-align: center;}
table.responsivegene th {text-transform: uppercase;font-size: 14px;letter-spacing: 1px;}

@media screen and (max-width: 600px) {
    table.responsivegene {border: 0;}
    table.responsivegene thead {display: none;}
    table.responsivegene tr {margin-bottom: 10px;display: block;border-bottom: 2px solid #ddd;}
    table.responsivegene td {display: block;text-align: right;font-size: 13px;border-bottom: 1px dotted #ccc;}
    table.responsivegene td:last-child { border-bottom: 0;}
    table.responsivegene td:before {content: attr(data-label);float: left;text-transform: uppercase;font-weight: bold;}
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.