markup-example.html

<table>
  <thead>
    <tr>
      <th>PID</th>
      <th>Level</th>
      <th>Message</th>
      <th>When</th>
    </tr>
  </thead>

  <tbody>
    <tr class="lg-debug">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">debug</span></td>
      <td data-label="Message">
        <div class="lg-message">200 GET / 27.826ms</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.802Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-info">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">info</span></td>
      <td data-label="Message">
        <div class="lg-message">browser-sync proxying worker on http://localhost:9001</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.771Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-debug">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">debug</span></td>
      <td data-label="Message">
        <div class="lg-message">Database connection to {db:stompflow} opened.</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.647Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-info">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">info</span></td>
      <td data-label="Message">
        <div class="lg-message">Listening on http://localhost:9000</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.647Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-debug">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">debug</span></td>
      <td data-label="Message">
        <div class="lg-message">Opening database connection to {db:stompflow}...</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.646Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-info">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">info</span></td>
      <td data-label="Message">
        <div class="lg-message">Database connection to {db:stompflow} established.</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.646Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-warn">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">warn</span></td>
      <td data-label="Message">
        <div class="lg-message">Using local file system instead of Amazon S3</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.646Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-info">
      <td data-label="PID"><span class="lg-pid">77574</span></td>
      <td data-label="Level"><span class="lg-level">info</span></td>
      <td data-label="Message">
        <div class="lg-message">Executing app@1.0.0</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:31:13.643Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-debug">
      <td data-label="PID"><span class="lg-pid">75981</span></td>
      <td data-label="Level"><span class="lg-level">debug</span></td>
      <td data-label="Message">
        <div class="lg-message">200 GET /staff/logs 342.008ms</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:30:46.676Z">a few seconds ago</time></td>
    </tr>

    <tr class="lg-debug">
      <td data-label="PID"><span class="lg-pid">75981</span></td>
      <td data-label="Level"><span class="lg-level">debug</span></td>
      <td data-label="Message">
        <div class="lg-message">200 GET /js/all.js 159.147ms</div>
      </td>
      <td data-label="When"><time class="lg-created" datetime="2015-05-14T23:30:39.532Z">a few seconds ago</time></td>
    </tr>
  </tbody>
</table>

responsive-tables.css

@media only screen and (max-width: 600px) {
  table {
    display: block;
  }
  thead {
    display: none;
  }
  tbody {
    display: block;
  }
  tr {
    display: block;
    margin-bottom: 10px;
  }
  td {
    display: block;
  }
  td:before {
    display: block;
    content: attr(data-label);
    color: #1fa3ca;
    font-variant: small-caps;
    font-size: 12px;
    margin: 0 0 5px;
  }
}

Note that it uses max-width: 600 instead of being "mobile first" so that I don't have to reset a ton of table element display attributes.