Notes for developers
All th
elements must have the scope
attribute set appropriately.
If required you can adjust the width of numeric indicator table columns in order to remove unnecessary white space on the left of the right aligned content. In order to apply the custom spacing add colgroup
as the first element within your table.
<colgroup>
<col width="..." />
</colgroup>
Numeric icons are coded as an:after
. To prevent the icon repeating within a table cell ensure that only the text is included within a td
containing the class a-numeric-indicator--negative-icon
or a-numeric-indicator--positive-icon
.
Code Examples
Scrollable table
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Included |
Not included |
Not included |
Not included |
Not included |
Pre-travel service |
Included |
Not included |
Not included |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Not included |
Not included |
Not included |
Not included |
Payment for loss of driving licence |
Included |
Not included |
Not included |
Not included |
Not included |
<div class="m-table" data-module="scrollable">
<table>
<thead>
<tr>
<td> </td>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
<td>...</td>
</tr>
...
</tbody>
</table>
</div>
Scrollable table with zebra stripes and without content keylines
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Included |
Not included |
Not included |
Not included |
Not included |
Pre-travel service |
Included |
Not included |
Not included |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Not included |
Not included |
Not included |
Not included |
Payment for loss of driving licence |
Included |
Not included |
Not included |
Not included |
Not included |
<div class="m-table m-table--no-content-keylines m-table--zebra-stripes" data-module="scrollable">
<table>
<thead>
<tr>
<td> </td>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
<td>...</td>
</tr>
...
</tbody>
</table>
</div>
Scrollable comparison table (first column fixed)
This table is only designed to work with icons.
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Included |
Not included |
Not included |
Not included |
Not included |
Pre-travel service |
Included |
Not included |
Not included |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Not included |
Not included |
Not included |
Not included |
Payment for loss of driving licence |
Included |
Not included |
Not included |
Not included |
Not included |
<div class="m-table" data-module="m-comparison-table">
<table>
<thead>
<tr>
<td> </td>
<th scope="col">...</th>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
<td>...</td>
</tr>
...
</tbody>
</table>
</div>
Comparison table (stacked at mobile)
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Included |
Not included |
Not included |
Not included |
Not included |
Pre-travel service |
Included |
Not included |
Not included |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Not included |
Not included |
Not included |
Not included |
Payment for loss of driving licence |
Included |
Not included |
Not included |
Not included |
Not included |
<div class="m-table m-table--comparison" data-module="scrollable">
<table>
<thead>
<tr>
<td> ;</td>
<th scope="col">[ Title 1 ]</th>
<th scope="col">[ Title 2 ]</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td data-th="[ Title 1 ]"><span class="m-table__icon m-table__icon--tick">Included</span></td>
<td data-th="[ Title 2 ]"><span class="m-table__icon m-table__icon--cross">Not included</span></td>
</tr>
...
</tbody>
</table>
</div>
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
5.01% |
2.22% |
2.22% |
2.22% |
2.22% |
Pre-travel service |
10% |
2.22% |
2.22% |
2.22% |
2.22% |
Daily £ benefit when in hospital |
0.33% |
2.22% |
2.22% |
2.22% |
2.22% |
Payment for loss of driving licence |
8.70% |
2.22% |
2.22% |
2.22% |
2.22% |
<div class="m-table" data-module="scrollable">
<table>
<colgroup>
<col />
<col width="..." />
<col width="..." />
</colgroup>
<thead>
<tr>
<td> </td>
<th scope="col">...</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">...</th>
<td class="a-numeric-indicator--positive-icon">...</td>
</tr>
<tr>
<th scope="row"> ... </th>
<td class="a-numeric-indicator--negative-icon">...</td>
</tr>
</tbody>
</table>
</div>
Table stacking at mobile by row
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Not included |
Not included |
Hazardous goods are carried |
Not included |
Not included |
Pre-travel service |
Included |
Social, domestic & pleasure |
Hazardous goods are carried |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Social, domestic & pleasure |
Not included |
Third party fire and theft |
Social, domestic & pleasure |
<div class="m-table m-table--stackable-row m-table--zebra-stripes">
<table>
<thead>
<tr>
<td> </td>
<th scope="col">[ Title 1 ]</th>
<th scope="col">[ Title 2 ]</th>
</tr>
</thead>
<tbody class="m-table__body-row-data--text-center">
<tr>
<th scope="row">[ Label 1 ]</th>
<td data-th="[ Title 1 ]">[ Content 1 ]</td>
<td data-th="[ Title 2 ]">[ Content 2 ]</td>
</tr>
<tr>
<th scope="row">[ Label 2 ]</th>
<td data-th="[ Title 1 ]">[ Content 1 ]</td>
<td data-th="[ Title 2 ]">[ Content 2 ]</td>
</tr>
</tbody>
</table>
</div>
Table stacking at mobile by column
In mobile view this table stacks by column using javascript. Without javascript, the table becomes scrollable when in mobile view.
|
Aviva |
AXA |
Direct Line |
Post Office |
Virgin |
Online discount |
Not included |
Not included |
Hazardous goods are carried |
Not included |
Not included |
Pre-travel service |
Included |
Social, domestic & pleasure |
Hazardous goods are carried |
Not included |
Not included |
Daily £ benefit when in hospital |
Included |
Social, domestic & pleasure |
Not included |
Third party fire and theft |
Social, domestic & pleasure |
<div class="m-table m-table--stackable-column" data-module="m-stackable-column-table">
<table>
<thead class="m-table--text-left">
<tr>
<td> </td>
<th scope="col">[ Title 1 ]</th>
<th scope="col">[ Title 2 ]</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">[ Label 1 ]</th>
<td data-th="[ Label 1 ]">[ Content 1 ]</td>
<td data-th="[ Label 1 ]">[ Content 2 ]</td>
</tr>
<tr>
<th scope="row">[ Label 2 ]</th>
<td data-th="[ Label 2 ]">[ Content 1 ]</td>
<td data-th="[ Label 2 ]">[ Content 2 ]</td>
</tr>
</tbody>
</table>
</div>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class |
Outcome |
Required |
Applied to |
Comments |
.m-table |
Base style for tables |
Yes |
div |
|
.m-table--comparison |
Modifier for creating a stacked comparison table on small screens |
|
.m-table |
Not for use in conjunction with scrollable tables |
.m-table--stackable-row |
Modifier for creating a stackable table by row label in mobile view |
|
.m-table |
Not for use in conjunction with comparison tables or scrollable tables |
.m-table--stackable-column |
Modifier for creating a stackable table by column header in mobile view |
|
.m-table |
Not for use in conjunction with comparison tables or scrollable tables |
.m-table--zebra-stripes |
Modifier for applying zebra stripes to a table |
|
.m-table |
Can be used on any table. |
.m-table--no-content-keylines |
Modifier to remove the keylines in the table |
|
.m-table |
Leaves the vertical keyline between the table row label and the table data |
.m-table__standard-icon |
Base style for functional and solid icons |
|
img |
Applies sizing to icon and when in mobile view, puts the icon inline to the text. |
.m-table__icon |
Base style an icon displayed within a table cell |
|
span |
Ensure the text within the element is meaningful if the icon was not there |
.m-table__icon--tick |
Modifier to set the icon to a tick |
|
.m-table__icon |
|
.m-table__icon--cross |
Modifier to set the icon to a cross |
|
.m-table__icon |
|
.a-numeric-indicator--positive-icon |
Modifier to add a positive numeric indicator icon |
|
td |
|
.a-numeric-indicator--negative-icon |
Modifier to add a negative numeric indicator icon |
|
td |
|
.m-table--text-center |
Modifier to set text align in the element to centre |
|
.m-table, thead, tbody, tr |
|
.m-table--text-left |
Modifier to set text align in the element to left |
|
.m-table, thead, tbody, tr |
|
.m-table__body-row-data--text-center |
Modifier to set the td text align to centre |
|
tbody |
|
.m-table__body-row-header--text-center |
Modifier to set the th text align to centre |
|
tbody |
|
.m-table__body-row-data--text-left |
Modifier to set the td text align to left |
|
tbody |
|
.m-table__body-row-header--text-left |
Modifier to set the th text align to left |
|
tbody |
|