<div class="table-wrap">
  <table class="sideways mobile-optimised">
    <caption>
    Vertical Table Text
    </caption>
    <thead>
      <tr>
       <th>&nbsp;</th>
        <th colspan="6">Desktop</th>
        <th colspan="7">Mobile</th>
      </tr>
      <tr class="subhead">
        <th>&nbsp;</th>
        <th><span>Chrome</span></th>
        <th><span>Edge</span></th>
        <th><span>Firefox</span></th>
        <th><span>Internet Explorer</span></th>
        <th><span>Opera</span></th>
        <th><span>Safari</span></th>
        <th><span>Android Webview</span></th>
        <th><span>Chrome for Android</span></th>
        <th><span>Edge Mobile</span></th>
        <th><span>Firefox for Android</span></th>
        <th><span>Opera for Android</span></th>
        <th><span>Safari on IOS</span></th>
        <th><span>Samsung Internet</span></th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Great Britain</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Australia</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Sweeden</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Germany</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>France</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Spain</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Italy</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Wales</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Ireland</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Austria</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
      <tr> 
        <!-- duplicate headers in data attributes on td elements -->
        <th>Canada</th>
        <td data-th="Desktop: Chrome">30000000</td>
        <td data-th="Desktop: Edge">100</td>
        <td data-th="Desktop: Firefox">10</td>
        <td data-th="Desktop: Internet Explorer">1000</td>
        <td data-th="Desktop: Opera">7</td>
        <td data-th="Desktop: Safari">10004</td>
        <td data-th="Mobile: Android Webview">1123</td>
        <td data-th="Mobile: Chrome for Android">147</td>
        <td data-th="Mobile: Edge Mobile">2000000</td>
        <td data-th="Mobile: Firefox for Android">8634</td>
        <td data-th="Mobile: Opera for Android">65</td>
        <td data-th="Mobile: Safari on IOS">1</td>
        <td data-th="Mobile: Samsung Internet">100</td>
      </tr>
    </tbody>
  </table>
</div>
<p class="other"><a target="_blank" href="https://codepen.io/paulobrien/pen/OrwXOp">See other similar versions</a></p>
<p class="other"><a target="_blank" href="https://codepen.io/paulobrien/pen/bOOVEJ">See other similar versions</a></p>
<p class="other"><a target="_blank" href="https://codepen.io/paulobrien/pen/xmmwOr">See other similar versions</a></p>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
/* allow table to scroll on medium sized screens*/
.table-wrap {
  width: 100%;
  overflow: auto;
}
/* works in modern desktop browsers*/
.sideways {
  margin: auto;
  border-collapse: collapse;
  font-size: 1.2rem;
  width: 100%;
  max-width: 1080px;
}
.sideways caption {
  background: #000;
  color: #fff;
  font-size: 2rem;
}
.sideways td,
.sideways th {
  border: 1px solid #000;
  padding: 0.5em;
  vertical-align: top;
  background: #f9f9f9;
}
.sideways td:nth-child(odd),
.sideways th:nth-child(odd) {
  background: #ccc;
}
.sideways thead th {
  text-align: center;
  /* vertical-align: bottom; bottom aligned*/
  vertical-align: middle; /* vertically centred*/
}
.sideways th:first-child {position:sticky;left:0;background:rgba(100,100,100,0.9);color:#fff;z-index:2;}


/* let ie11 play but don't transform it in case older version read this -thanks to @coothead*/
.sideways thead span {
  -ms-writing-mode: tb-lr;
}
/* lets just give the rotation to browsers that understand it otherwise they may also get transformed but not rotated. Now older browsers just get a normal table*/
@supports (writing-mode: vertical-lr) {
  .sideways thead .subhead span {
    display: inline-block;
    writing-mode: vertical-lr;
    white-space: nowrap;
    transform: rotate(180deg);
    line-height: 0;
    /* than ks to @Erik_J*/
  }
}
/* lets make it nice for smaller screens */
@media screen and (max-width: 650px) {
  table.mobile-optimised {
    word-wrap: break-word;
    width: 100%;
  }
  table.mobile-optimised thead {
    display: none;
  }
  table.mobile-optimised td,
  table.mobile-optimised th {
    display: block;
    float: left;
    /* ie9 and under hack */
    width: 100%;
    clear: both;
    background: #f5f5f5;
    padding: 10px 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  table.mobile-optimised tbody,
  table.mobile-optimised tr {
    display: block;
  }
  .mobile-optimised td:before {
    content: attr(data-th);
    display: block;
    font-weight: bold;
    margin: 0 0 2px;
    color: #000;
  }
  .mobile-optimised tbody tr {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .sideways thead span {
    display: block;
    writing-mode: inherit;
    white-space: normal;
    transform: none;
    line-height: normal;
  }
  table.sideways.mobile-optimised th {
    background: rgba(186, 218, 85, 0.7);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  table.sideways.mobile-optimised tr:nth-child(odd) th {
    background: rgba(240, 15, 0, 0.7);
    color: #fff;
  }
  .table-wrap {
    overflow: visible;
  }
}



.other{text-align:center;}