table, thead, tfoot, tbody, tr, th, td {
      display: block;
    }
    
    tr {
      margin: .6em 0;
    }
    
    thead {
      height: 0; /* we show titles for each cell, not in the header */
      overflow: hidden;
    }
    
    /* show the title attribute above each data cell */
    td[title]:before {
      display: block;
      font-weight: bold;
      content: attr(title); 
    }
    
    @media (min-width: 48rem) { /* assume our reset table fits in there */ 
      table { display: table; }
      thead { display: table-header-group; }
      tfoot { display: table-footer-group; }
      tbody { display: table-row-group; }
      tr { display: table-row; }
      td, th { display: table-cell; }
      td[title]:before { content: none; }
    }