title: Freeze first two columns and last column of an HTML table that is using both horizontal and vertical scroll without JavaScript
body: <p>I am attempting to freeze the first two columns and last column of an HTML table that is using both horizontal and vertical scroll and haven't been successful. I don't have control of how the table html is output but it matches the way it is structured in the sample below (i.e. thead/tr/th tbody/tr/td. I tried using position absolute on the columns and data but it doesn't look right when scrolling.</p>
  
  <p>I would like to know if it is possible to achieve this without the use of JavaScript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    width: 500px;
    height: 300px;
    display: block;
    overflow: auto;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Column 1&lt;/th&gt;
        &lt;th&gt;Column 2&lt;/th&gt;
        &lt;th&gt;Column 3&lt;/th&gt;
        &lt;th&gt;Column 4&lt;/th&gt;
        &lt;th&gt;Column 5&lt;/th&gt;
        &lt;th&gt;Column 6&lt;/th&gt;
        &lt;th&gt;Column 7&lt;/th&gt;
        &lt;th&gt;Column 8&lt;/th&gt;
        &lt;th&gt;Column 9&lt;/th&gt;
        &lt;th&gt;Column 10&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Data value 1&lt;/td&gt;
        &lt;td&gt;Data value 2&lt;/td&gt;
        &lt;td&gt;Data value 3&lt;/td&gt;
        &lt;td&gt;Data value 4&lt;/td&gt;
        &lt;td&gt;Data value 5&lt;/td&gt;
        &lt;td&gt;Data value 6&lt;/td&gt;
        &lt;td&gt;Data value 7&lt;/td&gt;
        &lt;td&gt;Data value 8&lt;/td&gt;
        &lt;td&gt;Data value 9&lt;/td&gt;
        &lt;td&gt;Data value 10&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>