A Strategy for Undoing Tables

undoing-tables.html

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Dept, Title</th>
      <th scope="col">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr class="vcard">
      <th scope="row" class="n" data-title="Name">
        <b class="family-name">Smith</b>,
        <b class="given-name">Laura</b>
      </th>
      <td data-title="Email">
        <a class="email" href="mailto:[email protected]">[email protected]</a>
      </td>
      <td data-title="Dept, Title">Biology, Director</td>
      <td class="tel" data-title="Phone">
        <a href="tel:+1123456789">123-456-789</a>
      </td>
    </tr>
    <tr class="vcard">
      <th scope="row" class="n" data-title="Name">
        <b class="family-name">Johnson</b>,
        <b class="given-name">Ron</b>
      </th>
      <td data-title="Email">
        <a class="email" href="mailto:[email protected]">[email protected]</a>
      </td>
      <td data-title="Dept, Title">Purchasing, Director</td>
      <td class="tel" data-title="Phone">
        <a href="tel:+11234567891">123-456-7891</a>
      </td>
    </tr>
  </tbody>
</table>

undoing-tables.scss

// undo tables for small screens
// $break-4 is the px-width break at which you want to cut it off
@media (max-width: px-to-ems($break-4 - 1px)) {
  
  // make each table separate from other ones
  table {

    border: 0;
    @include trailing-border;
    padding-bottom: 0;
    display: block;
    width: 100%;
    	
    // make sure captions are displayed
    caption {
      display: block;
    }
    
    /* 
     * wipe the thead from the face of the earth
     * modern screen readers will expose the 
     * generated content
     */
    thead {
      display: none;
      visibility: hidden;
    }
    
    /*
     * make everything display block so it 
     * aligns vertically
     */
    tbody, tr, th, td {
      border: 0;
      display: block;
      padding: 0;
      text-align: left;
      white-space: normal;
    }
    
    // give each row a little space
    tr {
      @include trailer;
    }
    
    /* Labeling
     * adding a data-title attribute to the cells
     * lets us add text before the content to provide
     * the missing context
     * 
     * Markup: 
     *   <td data-title="Column Header">Content Here</td>
     * 
     * Display:
     *   Column Header: Content Here
     */
    th[data-title]:before,
    td[data-title]:before {
      content: attr(data-title) ":\00A0";
      font-weight: bold;
    }
    th:not([data-title]) {
      font-weight: bold;
    }
    
    // hide empty cells
    td:empty {
      display: none;
    }
  }
}

Oddly VoiceOver (Mac) ignores the implicit role for table after changing the display value of one of its required children to block. Explicitly adding the appropriate roles (https://gist.github.com/4698174) fixes this to a certain extent. The table regains its semantic meaning but there's still some discrepancy between visual and spoken rows/cells.