Responsive accessible table

How to keep a table accessible and readable on mobile. A simple solution: make it a definition list. Try this page on a wide page and tight one. On your desktop just zoom in and out with your browser.

This page is not tested yet and might not be conforming to WCAG 2.0.

Translation of all Dutch Ministries

Ministerie English Deutsch Français Espagñol
Ministerie van Algemene Zaken Ministry of General Affairs Ministerium für allgemeine Angelegenheiten Ministère des Affaires Générales Ministerio de Asuntos Generales
Ministerie van Binnenlandse Zaken en Koninkrijksrelaties Ministry of the Interior and Kingdom Relations Ministerium für Inneres und Königreichsbeziehungen Ministère de l'Intérieur et des Relations au sein du Royaume Ministerio del Interior y de Relaciones del Reino
Ministerie van Buitenlandse Zaken Ministry of Foreign Affairs Ministerium für auswärtige Angelegenheiten Ministère des Affaires étrangères Ministerio de Asuntos Exteriores
Ministerie van Defensie Ministry of Defence Ministerium der Verteidigung Ministère de la Défense Ministerio de Defensa
Ministerie van Economische Zaken Ministry of Economic Affairs Ministerium für Wirtschaft Ministère des Affaires économiques Ministerio de Asuntos Económicos
Ministerie van Financiën Ministry of Finance Ministerium der Finanzen Ministère des Finances Ministerio de Finanzas
Ministerie van Infrastructuur en Milieu Ministry of Infrastructure and the Environment Ministerium für Infrastruktur und Umwelt Ministère de l’Infrastructure et de l'Environnement Ministerio de Infraestructura y Medio ambiente
Ministerie van Onderwijs, Cultuur en Wetenschap Ministry of Education, Culture and Science Ministerium für Bildung, Kultur und Wissenschaft Ministère de l'Enseignement, de la Culture et des Sciences Ministerio de Educación, Cultura y Ciencia
Ministerie van Sociale Zaken en Werkgelegenheid Ministry of Social Affairs and Employment Ministerium für Soziales und Arbeit Ministère des Affaires Sociales et de l'Emploi Ministerio de Asuntos Sociales y Empleo
Ministerie van Veiligheid en Justitie Ministry of Security and Justice Ministerium für Sicherheit und Justiz Ministère de la Sécurité et de la Justice Ministerio de Seguridad y Justicia
Ministerie van Volksgezondheid, Welzijn en Sport Ministry of Health, Welfare and Sport Ministerium für Gesundheit, Gemeinwohl und Sport Ministère de la Santé, du Bien-être et des Sports Ministerio de Sanidad, Bienestar y Deportes

The code example

HTML


<div id="copy"></div>

<table>
  <thead>
    <tr>
      <th>...</th>
   ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
  </tbody>
</table>


JavaScript

Requires some JQuery; sorry for that. (original source: http://jsfiddle.net/5hMN8/)


var template = $("<dl>");
$("table thead tr th").map(function () {
    return $('<dt/>', {
        text: $(this).text()
    }).get();
}).appendTo(template);

$("table tbody tr").each(function () {
    var newDl = template.clone();
    $(this).find('td').each(function (idx, ob) {
        newDl.find(':nth-of-type(' + (idx + 1) + ')').after($('<dd/>', {
            text: $(this).text()
        }));
    })
    $('#copy').append(newDl);
});
$('#copy').addClass("tight-only");
$("table").addClass("table-wide-only");


CSS

Make definition list OR table visible.


.table-wide-only {
  display:none;
}
.tight-only {
  display:block;
}


@media (min-width:800px) {
  .table-wide-only {
    display:table;
  }
  .tight-only {
    display:none;
  }
}