9.8 Table cell widths View in a new window

There are five different preset widths you can apply to table cells (td element). They are:

  • .table--cell-width-s - 190px (Fixed)
  • .table--cell-width-m - 25%
  • .table--cell-width-l - 37.5%
  • .table--cell-width-xl - 50%
  • .table--cell-width-xxl - 75%

Apply classes to table cells in one row (tr element) only.

Twig: wysiwyg/td-widths.twig

Example
Name Unit Phone
Adair, Daryl Management Discipline Group 0422 555 666
Adriaanse, Johanna Management Discipline Group 0422 333 555
Agarwal, Renu Management Discipline Group 0433 555 666
Markup 
<table>
  <thead>
  <tr>
    <th>Name</th>
    <th>Unit</th>
    <th>Phone</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="table--cell-width-xl"><a href="#">Adair, Daryl</a></td>
    <td class="table--cell-width-m">Management Discipline Group</td>
    <td class="table--cell-width-m">0422 555 666</td>
  </tr>
  <tr>
    <td><a href="#">Adriaanse, Johanna</a></td>
    <td>Management Discipline Group</td>
    <td>0422 333 555</td>
  </tr>
  <tr>
    <td><a href="#">Agarwal, Renu</a></td>
    <td>Management Discipline Group</td>
    <td>0433 555 666</td>
  </tr>
  </tbody>
</table>