<h1>Scroll Middle Section Sideways</h1>
<div class="table-scroll-wrap">
  <div id="table-scroll" class="table-scroll">
    <table id="main-table" class="main-table">
      <thead>
        <tr>
          <th class="col col1" scope="col">Header 1</th>
          <th class="col col2" scope="col">Header 2</th>
          <th class="col col3" scope="col">Header 3 </th>
          <th scope="col">Header 4 </th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
          <th scope="col">Header 8</th>
          <th scope="col">Header 9</th>
          <th scope="col">Header 10</th>
          <th scope="col">Header 11</th>
          <th scope="col">Header 12</th>
          <th scope="col">Header 13</th>
          <th scope="col">Header 14</th>
          <th scope="col">Header 15</th>
          <th class="col collast" scope="col">Header 16</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col col1">1 First top Column</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4Cellcontentwithmore content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9Cellcontentwith more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>
        <tr>
          <td class="col col1">1 Last FirstColumn</td>
          <td class="col col2">2 Cell content </td>
          <td class="col col3">3 <a href="#">Cell content longer</a></td>
          <td>4 Cell content with more content and more content </td>
          <td>5 Cell content</td>
          <td>6 Cell content</td>
          <td>7 Cell content</td>
          <td>8 Cell content</td>
          <td>9 Cell content with more content and more </td>
          <td>10 Cell content</td>
          <td>11 Cell content</td>
          <td>12 Cell content with more content </td>
          <td>13 Cell content</td>
          <td>14 Cell content</td>
          <td>15 Cell content</td>
          <td class="col collast">16 Cell content</td>
        </tr>

      </tbody>
      <tfoot>
        <tr>
          <td class="col col1">Footer 1</td>
          <td class="col col2">Footer 2</td>
          <td class="col col3">Footer 3</td>
          <td>Footer 4</td>
          <td>Footer 5</td>
          <td>Footer 6</td>
          <td>Footer 7</td>
          <td>Footer 8</td>
          <td>Footer 9</td>
          <td>Footer 10</td>
          <td>Footer 11</td>
          <td>Footer 12</td>
          <td>Footer 13</td>
          <td>Footer 14</td>
          <td>Footer 15</td>
          <td class="col collast">Footer 16</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

:root {
  --cell-width: 100px; 
  --padding:10px;
  --padding-borders:21px;/* 2 * 10 + 2 * 1 */
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1 {
  margin: auto 0 0;
  text-align: center;
  font-size: 1.5rem;
}
.table-scroll-wrap {
  position: relative;
  margin: 0 auto auto;
  width: 85%;
  max-width: 2000px;
  height: 70vh; /* for vertical scrolling if required*/
}
.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0;
  overflow: auto;
  height: 100%; /* for vertical scrolling if required*/
}
.table-scroll table {
  width: 100%;
  margin: 0;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  word-wrap: break-word;
}
.table-wrap {
  position: relative;
}
.table-scroll th,
.table-scroll td {
  padding: 5px var(--padding);
  background: #fff;
  vertical-align: top;
  width: auto;
  min-width:100px;
  word-break:break-word;
}
.table-scroll td{
  border-right:1px solid #000;
  border-bottom:1px solid #000;
}
.table-scroll th{border-right:1px solid #666;}

.table-scroll th.col1:before,
.table-scroll th.col2:before,
.table-scroll th.col3:before{
  /* this forces cell width not to shrink in auto algorithm*/
  content:"";
  display:block;
  height:0px;
  width: var(--cell-width);
}
.table-scroll th.col1,
.table-scroll th.col2,
.table-scroll th.col3{
   width: var(--cell-width);
}

.table-scroll thead th {
  background: #333;
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  white-space:nowrap;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky; /* this is needed for ios*/
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index: 4;
}

a:focus {
  background: red;
} /* testing links*/

.col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}

tbody .col {
  background: #ccc;
}
.col2 {
  left: calc(var(--cell-width) + var(--padding-borders));
}
.col3 {
  left: calc((var(--cell-width) + var(--padding-borders)) * 2);
}
#table-scroll .collast {
  left: auto;
  right: 0;
  border-right:none;
}
thead .col,
.table-scroll tfoot .col {
  z-index: 6;
}
@media screen and (max-width: 1050px) {
  .table-scroll-wrap {
    width: 100%;
  }
}

/* for small screen I would remove sticky side columns and just let table scroll sideways.*/

/* something roughly like this */
@media screen and (max-width: 900px) {
  .table-scroll table {
    table-layout: auto;
  }
  .table-scroll tbody .col {
    position: static;
  }
  .table-scroll thead .col,
  .table-scroll tfoot .col {
    left: auto;
    right: auto;
  }
  .table-scroll tbody td.col {
    background: #fff;
  }
  .table-scroll th,
  .table-scroll td {
    min-width: 150px;
  }
  .table-scroll-wrap:after,
   .table-scroll-wrap:before{
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to left, #666, transparent);
    z-index: 999;
    width: 45px;
    pointer-events: none;
  }
  .table-scroll-wrap:before{
    right:auto;
    left:0;
     background: linear-gradient(to right, #666, transparent)
  }
}

/* see version v5 with forminimal js example

https://codepen.io/paulobrien/pen/oNGwvKv

*/

/* Full js example here:

https://codepen.io/paulobrien/pen/emmVXXQ/66a6090b1cadaa164ee323e1654d1464

*/