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;
  }
}

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

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