Responsive Data Tables CSS

<table>
  <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>
body {
    font-family: arial;
  }

table { border: 1px solid #ccc; width: 100%; margin:0; padding:0; border-collapse: collapse; border-spacing: 0; }

table tr { border: 1px solid #ddd; padding: 5px; }

table th, table td { padding: 10px; text-align: center; }

table th { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }

@media screen and (max-width: 600px) { table { border: 0; }

table thead { display: none; }

 table tr { margin-bottom: 10px; display: block; border-bottom: 2px solid #ddd; }

 table td { display: block; text-align: right; font-size: 13px; border-bottom: 1px dotted #ccc; }

 table td:last-child { border-bottom: 0; }

 table td:before { content: attr(data-label); float: left; text-transform: uppercase; font-weight: bold; } }