6.10 Advanced table View in a new window

Features enlargeable table cells and a stacked responsive design. In addition use the table--cell-width-x classes on td elements to control their size.

Twig: components/table/responsive-table.twig

Example
A table caption
Name Unit Position
Adair, Daryl Management Discipline Group Associate Professor
Adriaanse, Johanna Management Discipline Group Associate of the faculty
Agarwal, Renu Management Discipline Group Associate Professor
Alexeev, Vital Finance Discipline Group Senior Lecturer
Golsby-Smith, Tony Finance Discipline Group Associate of the faculty
Adair, Daryl Management Discipline Group Associate Professor
Adriaanse, Johanna Management Discipline Group Associate of the faculty
Agarwal, Renu Management Discipline Group Associate Professor
Alexeev, Vital Finance Discipline Group Senior Lecturer
Golsby-Smith, Tony Finance Discipline Group Associate of the faculty
Markup
<div class="table__stretch-wrapper">
  <table class="js-table--responsive">
    <caption>A table caption</caption>
    <thead>
      <tr>
        <th>Name</th>
        <th>Unit</th>
        <th>Position</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="table--cell-width-l table--enlarged"><a href="#">Adair, Daryl</a></td>
        <td class="table--cell-width-l">Management Discipline Group</td>
        <td class="table--cell-width-m">Associate Professor</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Adriaanse, Johanna</a></td>
        <td>Management Discipline Group</td>
        <td>Associate of the faculty</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Agarwal, Renu</a></td>
        <td>Management Discipline Group</td>
        <td>Associate Professor</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Alexeev, Vital</a></td>
        <td>Finance Discipline Group</td>
        <td>Senior Lecturer</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Golsby-Smith, Tony</a></td>
        <td>Finance Discipline Group</td>
        <td>Associate of the faculty</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Adair, Daryl</a></td>
        <td>Management Discipline Group</td>
        <td>Associate Professor</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Adriaanse, Johanna</a></td>
        <td>Management Discipline Group</td>
        <td>Associate of the faculty</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Agarwal, Renu</a></td>
        <td>Management Discipline Group</td>
        <td>Associate Professor</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Alexeev, Vital</a></td>
        <td>Finance Discipline Group</td>
        <td>Senior Lecturer</td>
      </tr>
      <tr>
        <td class="table--enlarged"><a href="#">Golsby-Smith, Tony</a></td>
        <td>Finance Discipline Group</td>
        <td>Associate of the faculty</td>
      </tr>
    </tbody>
  </table>
</div>