8.2 tables.mobile Table small screens

Toggle example guides Toggle HTML markup

This component is useful for visualizing large amount of data on small screens.

Examples
Default styling
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD)
Sairasloma Sairaus, 15pv
Lääkäri Mikko Mikkonen
Hoito Ohje
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti
Sairasloma Sairaus, 2pv
Lääkäri Tuukka Tukkanen
Hoito Ohje
.table--mobile-headers
Table that requires labels visible on the mobile.
1.11.2016 J38.3 Toiminnallinen äänihuulisalpaus (VCD)
Sairasloma Sairaus, 15pv
Lääkäri Mikko Mikkonen
Hoito Ohje
1.11.2016 A07.9 Määrittämätön suoliston alkueläintauti
Sairasloma Sairaus, 2pv
Lääkäri Tuukka Tukkanen
Hoito Ohje
Markup: components/table/table-mobile.twig 
<table class="table table--content table--mobile table--two-column {{ modifier_class }}">
  {% for row in table.rows %}
    <tbody class="table__row table__row--{{ cycle(['odd', 'even'], loop.index0) }}">
      {% for item in row %}
        {% if loop.index == 1 %}
          <tr class="table__sub-row">
            <td class="table__cell">
              {{- item -}}
            </td>
          {% if loop.length == 1 %}
            </tr>
          {% endif %}
        {% elseif loop.index == 2 %}
            <td class="table__cell">
              <strong>{{ item }}</strong>
            </td>
          </tr>
        {% else -%}
          <tr class="table__sub-row">
            <td class="table__cell">
              <span class="table__label">{{- table.headers[loop.index0] -}}</span>
            </td>
            <td class="table__cell">
              {{- item -}}
            </td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  {% endfor %}
</table>
Source: components/table/table.scss, line 66