8.3 tables.single-column Table small screen single column

Toggle example guides Toggle HTML markup

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

Example
1.11.2016
J38.3 Toiminnallinen äänihuulisalpaus (VCD)
Sairaus, 15pv
1.11.2016
A07.9 Määrittämätön suoliston alkueläintauti
Sairaus, 2pv
Markup: components/table/table-single-column.twig
<table class="table table--content table--mobile table--single-column {{ modifier_class }}">
  {% for row in table.rows %}

    <tr class="table__row table__row--{{ cycle(['odd', 'even'], loop.index0) }}">
      <td class="table__cell">
        {% for item in row %}
          <div class="table__content">
            {{- item -}}
          </div>
        {% endfor %}

      </td>
    </tr>
  {% endfor %}
</table>
Source: components/table/table.scss, line 104