Responsive/Folding Tables

by Alex McWhinnie

HTML

<link rel="stylesheet" href="https://assets.ipums.org/_css/jsfiddle.1.0.css">
<script src="https://assets.ipums.org/_js/load-fonts.1.3.js"></script>
<h1>
Responsive/Folding Tables
</h1>

<table class="folding-table">
  <thead>
    <tr>
      <th scope="row">Data Project</th>
      <th scope="row">Online/SDA Exercises</th>
      <th scope="row">Excel Exercises</th>
      <th scope="row">Other Exercises</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">USA</th>
      <td data-title="Online/SDA"><a href="sda.pdf">Exercise</a></td>
      <td data-title="Excel"><a href="excel.pdf">Exercise</a></td>
      <td data-title="Other"><a href="excel.pdf">Exercise</a></td>
    </tr>
    <tr>
      <th scope="row">CPS</th>
      <td data-title="Online/SDA"><a href="sda.pdf">Exercise</a></td>
      <td data-title="Excel"><a href="excel.pdf">Exercise</a></td>
      <td data-title="Other"><a href="excel.pdf">Exercise</a></td>
    </tr>
  </tbody>
</table>