Edit in JSFiddle

<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>