DokuWiki

exemple en ligne : http://codepen.io/JohnMav/pen/BoGJNy?editors=0100

on 'collapse' les données qui prennent alors la forme d'une liste à opposer à la forme tableau

pro : toutes les données visibles et non cachées

@media screend and (max-width: 500px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
}

on souhaite aussi virer les table header, mais pas avec un display non sinon plus accessible avec la lecture vocale :

thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

on va décaler nos td vers la droite pour faire de la place car on veut utiliser ::before pour insérer des infos sur les contenus

td {
  position: relative;
  padding-left: 50%;
}

puis on récupère le contenu de l'attribut data-th pour l'afficher avec ::before

td:before {
  position: absolute;
  left: 6px;
  content: attr(data-th);
  font-weight: bold;
}