Tables

Regular tables have standard heading colour set and pyjama stripe to each row

To allow for wide tables on smaller viewports a wrapper can be added using a simple JavaScript function that will add a div around the table with a horizontal scroll class: 

o-scroll o-scroll--horizontal

This allows the table to be scrolled on smaller viewports. If this is not required a class is added to the table so no wrapper is added.

Regular tables

Regular tables are the default. They are used if the table has few columns and rows.

Example

Cand. no. Name Gender DOB
2142 Nam Sodales Female 01/11/2000
2158 Diam ac Odales Male 01/12/2000
2177 Consectur Smith Female 01/10/2000
2142 Lorem Ipsum Female 01/11/2000
2158 Diam ac Odales Male 01/12/2000
2177 Consectur Smith Female 01/10/2000

Code example

Table header
<table class="table c-table" summary="Table contains candidate number, name, gender, date of birth with UCI, ULN and status for the candidate">
<thead>
  <tr> 
    <th scope="col">Cand. no.</th>
    <th scope="col">Name</th>
    <th scope="col">Gender</th>
    <th scope="col">DOB</th>
  </tr>
</thead>
Table row
<tr>
  <td>2142</td>
  <td>Nam Sodales</td>
  <td>Female</td>
  <td>01/11/2000</td>
</tr>