Responsive table brushed

index.html

<div>
  <label><input name="variant" type="radio" value="flexwrap"> Flex wrap</label>
  <label><input name="variant" type="radio" value="flexwraptwo"> Flex wrap II</label>
  <label><input type="checkbox" id="checkfake" /> Fake mobile</label>
</div>
<div id="maindiv">
<div>
  <table name="caniuse">
    <thead>
      <tr>
        <th aria-label="Feature"></th>
        <th>Chrome67</th>
        <th>FF60</th>
        <th>IE11</th>
        <th>Safari11</th>
        <th>Chrome mobile</th>
        <th>FF mobile</th> 
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>sticky th</td>
        <td>x</td>
        <td>x</td>
        <td>-</td>
        <td>-</td>
        <td>?</td>
        <td>?</td>
      </tr>
      <tr>
        <td>contenteditable</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
      </tr>
      <tr>
        <td>marquee</td>
        <td>-</td>
        <td>-</td>
        <td>x</td>
        <td>-</td>
        <td>-</td>
        <td>-</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  <table name="financial">
    <thead>
      <tr>
        <th aria-label="Figure"></th>
        <th>1Q17</th>
        <th>2Q17</th>
        <th>3Q17</th>
        <th>4Q17</th>
        <th>1Q18</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Revenue</td>
        <td>20</td>
        <td>22</td>
        <td>21</td>
        <td>23</td>
        <td>25</td>
      </tr>
      <tr>
        <td>EPS</td>
        <td>100</td>
        <td>90</td>
        <td>80</td>
        <td>70</td>
        <td>20</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
      <tr>
        <td>other</td>
        <td>70</td>
        <td>80</td>
        <td>80</td>
        <td>20</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

responsive-table-brushed.markdown

Responsive table brushed

A Pen by Sebastian Rothbucher on CodePen.

License.

script.js

window.onload = () => {
  [...document.getElementsByName("variant")]
    .forEach(v => v.onchange = (e) => {
    [...document.getElementsByName("variant")]
      .map(v => v.value)
      .forEach(vv => document.getElementById('maindiv').classList[e.target.value === vv ? 'add' : 'remove']("variant-" + vv));
  });
  document.getElementById("checkfake").onchange = () => document.body.classList.toggle("fakemobile");
};

style.scss

/* basic styles */
body, th, td {
  font-family: sans-serif;
}
body, td {
  font-size: 14px;
}
th {
  font-size: 12px;
}
thead tr {
  border-bottom: 1px solid darkblue;
}
tbody tr {
  border-bottom: 1px solid lightgrey;
}
@mixin mobile {
  /* flex wrap */
  .variant-flexwrap table,
  .variant-flexwrap thead,
  .variant-flexwrap tbody {
    display: block;
  }
  .variant-flexwrap thead {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    background: white;
  }
  .variant-flexwrap thead tr,
  .variant-flexwrap tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding-left: 95px;
  }
  .variant-flexwrap thead th:nth-child(1),
  .variant-flexwrap tbody td:nth-child(1) {
    display: inline-block;
    width: 93px;
    max-width: 93px;
    overflow-x: hidden;
    margin-left: -95px;
    text-align: left;
  }
  .variant-flexwrap thead th:nth-child(n+2),
  .variant-flexwrap tbody td:nth-child(n+2) {
    display: inline-block;
    width: 95px;
    text-align: center;
  }
  /* flex wrap II */
  .variant-flexwraptwo table,
  .variant-flexwraptwo thead,
  .variant-flexwraptwo tbody {
    display: block;
  }
  .variant-flexwraptwo thead {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    background: white;
  }
  .variant-flexwraptwo thead tr,
  .variant-flexwraptwo tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .variant-flexwraptwo thead th:nth-child(1),
  .variant-flexwraptwo tbody td:nth-child(1) {
    display: inline-block;
    width: 100%;
    font-style: italic;
    text-align: left;
  }
  .variant-flexwraptwo thead th:nth-child(n+2),
  .variant-flexwraptwo tbody td:nth-child(n+2) {
    display: inline-block;
    width: 95px;
    text-align: center;
  }
}
@media screen and (max-width: 600px) { /* mobile */
  @include mobile;
}
.fakemobile { /* just that - like iPhone SE portrait */
  max-width: 303px; 
  @include mobile;
}