0

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.

I would like to know if it is possible to achieve this without the use of JavaScript.

table {
  width: 500px;
  height: 300px;
  display: block;
  overflow: auto;
  white-space: nowrap;
}
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
    <tr>
      <td>Data value 1</td>
      <td>Data value 2</td>
      <td>Data value 3</td>
      <td>Data value 4</td>
      <td>Data value 5</td>
      <td>Data value 6</td>
      <td>Data value 7</td>
      <td>Data value 8</td>
      <td>Data value 9</td>
      <td>Data value 10</td>
    </tr>
  </tbody>
</table>
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231
  • Does this answer your question? [Large dynamically sized html table with a fixed scroll row and fixed scroll column](https://stackoverflow.com/questions/10838700/large-dynamically-sized-html-table-with-a-fixed-scroll-row-and-fixed-scroll-colu) – Heretic Monkey Dec 27 '19 at 17:45
  • This might be duplicate, pls refer here : https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-a-fixed-frozen-left-column-and-a-scrollable-b – Senthil Dec 27 '19 at 17:45
  • @Senthil The table is structured differently in the post you are referring to and there is no vertical scroll. – Blake Rivell Dec 27 '19 at 18:02
  • @HereticMonkeyIt is similar but the table is structured a bit differently without a thead/th and tbody/td and they are using JavaScript. I am wondering if js is required for this. – Blake Rivell Dec 27 '19 at 18:06

1 Answers1

0

Hope this helps, using jQuery and `css 2 colums are fixed (includes header as well) https://jsfiddle.net/spsenthilrm/hadm9Lyw/

Note: The position left is kept on change when the user scrolls, so jQuery is required as well for this fixed 2 columns.

L_J
  • 2,351
  • 10
  • 23
  • 28
Senthil
  • 2,156
  • 1
  • 14
  • 19