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

This example is pretty old now (March 2018) and might be outdated.

Please consider this: Under-Engineered Responsive Tables by Adrian Roselli