How do I create an HTML table with a fixed frozen left column and a scrollable body

Question

I need a simple solution  I know it s similar to some other questions  like    HTML table with fixed headers and a fixed column  How can I lock the first row and first column of a table when scrolling  possibly using JavaScript and CSS    But I need just a single left column to be frozen and I would prefer a simple and script-less solution

User · Answer

Eamon Nerbonne  I changed some css in your code and it s better now the scroll bar starts from the first row   http   jsfiddle net At8L8   I just add two line     div   padding-left 5em   headcol   background-color    fff

User · Answer

Alternatively  style the tbody with a predetermined size  via height 20em  for example  and use overflow-y scroll   Then  you can have a huge tbody  which will scroll independently of the rest of the page

User · Answer

If you re developing something more complicated and want multiple columns to be fixed stuck to the left  you ll probably need something like this    x000D   x000D   wrapper   x000D      overflow-x  scroll  x000D    x000D   x000D  td   x000D      min-width  50px  x000D    x000D   x000D   fixed   x000D      position  absolute  x000D      background   aaa  x000D    x000D   lt div class  content  style  width  400px  gt  x000D   x000D     lt div class  wrapper  style  margin-left  100px  gt  x000D   x000D         lt table gt  x000D           lt thead gt  x000D             lt tr gt  x000D               lt th class  fixed  style  left  0px  gt aaa lt  th gt  x000D               lt th class  fixed  style  left  50px  gt aaa2 lt  th gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D               lt th gt d lt  th gt  x000D               lt th gt e lt  th gt  x000D               lt th gt f lt  th gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D               lt th gt d lt  th gt  x000D               lt th gt e lt  th gt  x000D               lt th gt f lt  th gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D               lt th gt d lt  th gt  x000D               lt th gt e lt  th gt  x000D               lt th gt f lt  th gt  x000D               lt th gt a lt  th gt  x000D               lt th gt b lt  th gt  x000D               lt th gt c lt  th gt  x000D               lt th gt d lt  th gt  x000D               lt th gt e lt  th gt  x000D               lt th gt f lt  th gt          x000D             lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D             lt tr gt  x000D               lt td class  fixed  style  left  0px  gt aaa lt  td gt  x000D               lt td class  fixed  style  left  50px  gt aaa2 lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D             lt  tr gt  x000D             lt tr gt  x000D               lt td class  fixed  style  left  0  gt bbb lt  td gt  x000D               lt td class  fixed  style  left  50px  gt bbb2 lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D               lt td gt a lt  td gt  x000D               lt td gt b lt  td gt  x000D               lt td gt c lt  td gt  x000D               lt td gt d lt  td gt  x000D               lt td gt e lt  td gt  x000D               lt td gt f lt  td gt  x000D             lt  tr gt  x000D           lt  tbody gt  x000D         lt  table gt  x000D   x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I didn t check each and every answer for this question  but after analyzing most of them I found that design fails in case of multiline data in cells or head  I used Javascript to solve this  I hope someone finds this helpful   https   codepen io kushagrarora pen zeYaoY   x000D   x000D  var freezeTables   document getElementsByClassName  freeze-pane    x000D   x000D     forEach call freezeTables  ftable   gt    x000D    var wrapper   document createElement  div    x000D    wrapper className    freeze-pane-wrapper   x000D    var scroll   document createElement  div    x000D    scroll className    freeze-pane-scroll   x000D   x000D    wrapper appendChild scroll   x000D   x000D    ftable parentNode replaceChild wrapper  ftable   x000D   x000D    scroll appendChild ftable   x000D   x000D    var heads   ftable querySelectorAll  th first-child    x000D   x000D    let maxWidth   0  x000D   x000D       forEach call heads  head   gt    x000D      var w   window x000D         getComputedStyle head  x000D         getPropertyValue  width   x000D         split  px   0   x000D      if  Number w   gt  Number maxWidth   maxWidth   w  x000D        x000D   x000D    ftable parentElement style marginLeft   maxWidth    px   x000D    ftable parentElement style width    calc 100  -     maxWidth    px    x000D       forEach call heads  head   gt    x000D      head style width   maxWidth    px   x000D      var restRowHeight   window x000D         getComputedStyle head nextElementSibling  x000D         getPropertyValue  height    x000D      var headHeight   window getComputedStyle head  getPropertyValue  height    x000D      if  headHeight  gt  restRowHeight  x000D        head nextElementSibling style height   headHeight  x000D      else head style height   restRowHeight  x000D        x000D      x000D   import url  https   fonts googleapis com css family Open Sans    x000D      x000D    font-family   Open Sans   sans-serif  x000D    x000D   x000D   container   x000D    width  400px  x000D    height  90vh  x000D    border  1px solid black  x000D    overflow  hidden  x000D    x000D   x000D  table  x000D  th  x000D  td   x000D    border  1px solid  eee  x000D    x000D   x000D   table   x000D    width  100   x000D    margin-bottom  1rem  x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    x000D   x000D   freeze-pane-wrapper   x000D    position  relative  x000D    x000D   x000D   freeze-pane-scroll   x000D    overflow-x  scroll  x000D    overflow-y  visible  x000D    x000D   x000D   freeze-pane th first-child   x000D    position  absolute  x000D    background-color  pink  x000D    left  0  x000D    top  auto  x000D    max-width  40   x000D    x000D   lt div class  container  gt  x000D     lt table class  freeze-pane  gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt th gt  x000D             lt p gt Model lt  p gt  x000D           lt  th gt  x000D           lt th gt  x000D             lt p gt Mercedes Benz AMG C43 4dr lt  p gt  x000D           lt  th gt  x000D           lt th gt  x000D             lt p gt Audi S4 Premium 4dr lt  p gt  x000D           lt  th gt  x000D           lt th gt  x000D             lt p gt BMW 440i 4dr sedan lt  p gt  x000D           lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt  x000D             lt p gt Passenger capacity lt  p gt  x000D           lt  th gt  x000D           lt td gt  x000D             lt p gt 5 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 5 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 5 lt  p gt  x000D           lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt  x000D             lt p gt Front  Head Shoulder Leg   In   lt  p gt  x000D           lt  th gt  x000D           lt td gt  x000D             lt p gt 37 1 55 3 41 7 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 38 9 55 9 41 3 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 39 9 54 8 42 2 lt  p gt  x000D           lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt th gt  x000D             lt p gt Second  Head Shoulder Leg   In   lt  p gt  x000D           lt  th gt  x000D           lt td gt  x000D             lt p gt 37 1 55 5 35 2 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 37 4 54 5 35 7 lt  p gt  x000D           lt  td gt  x000D           lt td gt  x000D             lt p gt 36 9 54 3 33 7 lt  p gt  x000D           lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    Note  the  container  div is just to demonstrate that code is compatible with mobile-view

User · Answer

I just made the right-most sticky column of a table sticky.

th:last-of-type {
 position: sticky;
 right: 0;
 width: 120px;
 background: #f7f7f7;
}


td:last-of-type {
 position: sticky;
 right: 0;
 background: #f7f7f7;
 width: 120px;
}

I believe if you'll do {position: sticky; left: 0;}, you'll get the desired result.

User · Answer

A little late but I did run across this thread when trying out solutions for myself. Assuming you're using modern browsers nowadays, I came up with a solution using CSS calc() to help guarantee widths met up.

_x000D_

.table-fixed-left table,_x000D_
.table-fixed-right table {_x000D_
  border-collapse: collapse;_x000D_
}_x000D_
.table-fixed-right td,_x000D_
.table-fixed-right th,_x000D_
.table-fixed-left td,_x000D_
.table-fixed-left th {_x000D_
  border: 1px solid #ddd;_x000D_
  padding: 5px 5px;_x000D_
}_x000D_
.table-fixed-left {_x000D_
  width: 120px;_x000D_
  float: left;_x000D_
  position: fixed;_x000D_
  overflow-x: scroll;_x000D_
  white-space: nowrap;_x000D_
  text-align: left;_x000D_
  border: 1px solid #ddd;_x000D_
  z-index: 2;_x000D_
}_x000D_
.table-fixed-right {_x000D_
  width: calc(100% - 145px);_x000D_
  right: 15px;_x000D_
  position: fixed;_x000D_
  overflow-x: scroll;_x000D_
  border: 1px solid #ddd;_x000D_
  white-space: nowrap;_x000D_
}_x000D_
.table-fixed-right td,_x000D_
.table-fixed-right th {_x000D_
  padding: 5px 10px;_x000D_
}

_x000D_

<div class="table-fixed-left">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>Normal Header</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>Header with extra line_x000D_
        <br/>&nbsp;</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>Normal Header</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>Normal with extra line_x000D_
        <br/>&nbsp;</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>Normal Header</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <th>Normal Header</th>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>_x000D_
<div class="table-fixed-right">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>Header</th>_x000D_
      <th>Another header</th>_x000D_
      <th>Header</th>_x000D_
      <th>Header really really really really long</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Info Long</td>_x000D_
      <td>Info_x000D_
        <br/>with second line</td>_x000D_
      <td>Info_x000D_
        <br/>with second line</td>_x000D_
      <td>Info Long</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Info Long</td>_x000D_
      <td>Info Long</td>_x000D_
      <td>Info Long</td>_x000D_
      <td>Info Long</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Info_x000D_
        <br/>with second line</td>_x000D_
      <td>Info_x000D_
        <br/>with second line</td>_x000D_
      <td>Info_x000D_
        <br/>with second line</td>_x000D_
      <td>Info</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
      <td>Info</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>

_x000D_

Hope this helps someone!

User · Answer

If you don t want to touch your current table too much you can make a fake pinned column in front of the table    The example shows one way of doing it without JS   x000D   x000D  table   x000D    border-collapse  collapse  x000D    border-spacing  0  x000D    border  1px solid  ddd  x000D    min-width  600px  x000D    x000D   x000D   labels   x000D    display flex  x000D    flex-direction  column x000D    x000D   x000D   overflow   x000D    overflow-x  scroll  x000D    min width  400px  x000D    flex  1  x000D    x000D   x000D   label   x000D    display  flex  x000D    align-items  center  x000D    white-space nowrap  x000D    padding  10px  x000D    flex  1  x000D    border-bottom  1px solid  ddd  x000D    border-right  2px solid  ddd  x000D    x000D   x000D   label last-of-type   x000D    overflow-x  scroll  x000D    border-bottom  0  x000D    x000D   x000D  td   x000D    border  1px solid  ddd  x000D    padding  10px  x000D    x000D   x000D   flex   x000D    display flex  x000D    max-width  600px  x000D    padding  0  x000D    border  5px solid  ddd  x000D    x000D   lt div class  flex  gt  x000D     lt div class  labels  gt  x000D       lt span class  label  gt Label 1 lt  span gt  x000D       lt span class  label  gt Lorem ipsum dolor sit amet  lt  span gt  x000D       lt span class  label  gt Lorem ipsum dolor  lt  span gt  x000D     lt  div gt  x000D     lt div class  overflow  gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D           lt td class  long  gt Lorem ipsum dolor sit amet consectetur adipisicing lt  td gt  x000D         lt  tr gt  x000D     lt  table gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In case of fixed width left column the best solution is provided by Eamon Nerbonne.

In case of variable width left column the best solution I found is to make two identical tables and push one above another. Demo: http://jsfiddle.net/xG5QH/6/.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* important styles */

.container {
   /* Attach fixed-th-table to this container,
      in order to layout fixed-th-table
      in the same way as scolled-td-table" */
   position: relative;

   /* Truncate fixed-th-table */
   overflow: hidden;
}

.fixed-th-table-wrapper td,
.fixed-th-table-wrapper th,
.scrolled-td-table-wrapper td,
.scrolled-td-table-wrapper th {
   /* Set background to non-transparent color
      because two tables are one above another.
    */
   background: white;
}
.fixed-th-table-wrapper {
   /* Make table out of flow */
   position: absolute;
}
.fixed-th-table-wrapper th {
    /* Place fixed-th-table th-cells above 
       scrolled-td-table td-cells.
     */
    position: relative;
    z-index: 1;
}
.scrolled-td-table-wrapper td {
    /* Place scrolled-td-table td-cells
       above fixed-th-table.
     */
    position: relative;
}
.scrolled-td-table-wrapper {
   /* Make horizonal scrollbar if needed */
   overflow-x: auto;
}


/* Simulating border-collapse: collapse,
   because fixed-th-table borders
   are below ".scrolling-td-wrapper table" borders
*/

table {
    border-spacing: 0;
}
td, th {
   border-style: solid;
   border-color: black;
   border-width: 1px 1px 0 0;
}
th:first-child {
   border-left-width: 1px;
}
tr:last-child td,
tr:last-child th {
   border-bottom-width: 1px;
}

/* Unimportant styles */

.container {
    width: 250px;
}
td, th {
   padding: 5px;
}
</style>
</head>

<body>
<div class="container">

<div class="fixed-th-table-wrapper">
<!-- fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

<div class="scrolled-td-table-wrapper">
<!-- scrolled-td-table
     - same as fixed-th-table -->
<table>
    <tr>
         <th>aaaaaaa</th>
         <td>ccccccccccc asdsad asd as</td>
         <td>ccccccccccc asdsad asd as</td>
    </tr>
    <tr>
         <th>cccccccc</th>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
         <td>xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyy zzzzzzzzzzzzz</td>
    </tr>
</table>
</div>

</div>
</body>
</html>

User · Answer

Style the left column with position  fixed    You ll presumably want to use top and left styles to control where exactly it occurs

User · Answer

This is an interesting jQuery plugin that creates fixed headers and or columns  Toggle fixed column to be true on the demo page to see it in action

User · Answer

For most browsers released after 2017   You can use the position  sticky  See https   caniuse com  feat css-sticky   There is no need for a fixed width column   Run the code snippet below to see how it works    x000D   x000D   tscroll   x000D    width  400px  x000D    overflow-x  scroll  x000D    margin-bottom  10px  x000D    border  solid black 1px  x000D    x000D   x000D   tscroll table td first-child   x000D    position  sticky  x000D    left  0  x000D    background-color   ddd  x000D    x000D   x000D   tscroll td   tscroll th   x000D    border-bottom  dashed  888 1px  x000D    x000D   lt html gt  x000D   lt div class  tscroll  gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt  lt  th gt  x000D           lt th colspan  5  gt Heading 1 lt  th gt  x000D           lt th colspan  8  gt Heading 2 lt  th gt  x000D           lt th colspan  4  gt Heading 3 lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt 9 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 10 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 11 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 12 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 13 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 14 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 15 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 16 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt 17 00 lt  td gt  x000D           lt td gt AAA lt  td gt  x000D           lt td gt BBB lt  td gt  x000D           lt td gt CCC lt  td gt  x000D           lt td gt DDD lt  td gt  x000D           lt td gt EEE lt  td gt  x000D           lt td gt FFF lt  td gt  x000D           lt td gt GGG lt  td gt  x000D           lt td gt HHH lt  td gt  x000D           lt td gt III lt  td gt  x000D           lt td gt JJJ lt  td gt  x000D           lt td gt KKK lt  td gt  x000D           lt td gt LLL lt  td gt  x000D           lt td gt MMM lt  td gt  x000D           lt td gt NNN lt  td gt  x000D           lt td gt OOO lt  td gt  x000D           lt td gt PPP lt  td gt  x000D           lt td gt QQQ lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you want a table where only the columns scroll horizontally  you can position  absolute the first column  and specify its width explicitly   and then wrap the entire table in an overflow-x  scroll  block   Don t bother trying this in IE7  however     Relevant HTML  amp  CSS    x000D   x000D  table   x000D    border-collapse  separate  x000D    border-spacing  0  x000D    border-top  1px solid grey  x000D    x000D   x000D  td  th   x000D    margin  0  x000D    border  1px solid grey  x000D    white-space  nowrap  x000D    border-top-width  0px  x000D    x000D   x000D  div   x000D    width  500px  x000D    overflow-x  scroll  x000D    margin-left  5em  x000D    overflow-y  visible  x000D    padding  0  x000D    x000D   x000D   headcol   x000D    position  absolute  x000D    width  5em  x000D    left  0  x000D    top  auto  x000D    border-top-width  1px  x000D      only relevant for first row   x000D    margin-top  -1px  x000D      compensate for top border   x000D    x000D   x000D   headcol before   x000D    content   Row    x000D    x000D   x000D   long   x000D    background  yellow  x000D    letter-spacing  1em  x000D    x000D   lt div gt  x000D   lt table gt  x000D           lt tr gt  lt th class  headcol  gt 1 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D           lt tr gt  lt th class  headcol  gt 2 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D           lt tr gt  lt th class  headcol  gt 3 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D           lt tr gt  lt th class  headcol  gt 4 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D           lt tr gt  lt th class  headcol  gt 5 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D           lt tr gt  lt th class  headcol  gt 6 lt  th gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    Fiddle

User · Answer

If the table has tbody and thead  make them the relative container in which we can fix td and th as absolute  table tbody       position  relative     table thead       position  relative       Make both the first header and first data cells  First column  absolute so that it sticks to the left  table td first-of-type       position  absolute     table th first-of-type       position  absolute       Move Second column according to the width of column 1   table td nth-of-type 2        padding-left   lt Width of column 1 gt      table th nth-of-type 2        padding-left   lt Width of column 1 gt

User · Answer

Here is another modification of the most popular answer, but with handling of variable length of text in the first column labels: http://jsfiddle.net/ozx56n41/

Basically, I'm using the second column for creating row height, like was mentioned. But my fiddle actually works unlike most mentioned above.

HTML:

<div id="outerdiv">
    <div id="innerdiv">
        <table>
            <tr>
                <td class="headcol"><div>This is a long label</div></td>
                <td class="hiddenheadcol"><div>This is a long label</div></td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol"><div>Short label</div></td>
                <td class="hiddenheadcol"><div>Short label</div></td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
        </table>
    </div>
</div>

CSS:

body {
    font: 16px Calibri;
}
#outerdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-top: 1px solid grey;
}
#innerdiv {
    overflow-x: scroll;
    margin-left: 100px;
    overflow-y: visible;
    padding-bottom: 1px;
}
table {
    border-collapse:separate;
}
td {
    margin: 0;
    border: 1px solid grey;
    border-top-width: 0;
    border-left-width: 0px;
    padding: 10px;
}
td.headcol {
    /* Frozen 1st column */
    position: absolute;
    left: 0;
    top: auto;
    border-bottom-width: 1px;
    padding: 0;
    border-left-width: 1px;
}
td.hiddenheadcol {
    /* Hidden 2nd column to create height */
    max-width: 0;
    visibility: hidden;
    padding: 0;
}
td.headcol div {
    /* Text container in the 1st column */
    width: 100px;
    max-width: 100px;
    background: lightblue;
    padding: 10px;
    box-sizing: border-box;
}
td.hiddenheadcol div {
    /* Text container in the 2nd column */
    width: 100px;
    max-width: 100px;
    background: red;
    padding: 10px;
}
td.long {
    background:yellow;
    letter-spacing:1em;
}

User · Answer

Add this in the head    lt link rel  stylesheet  type  text css  href   path to easyscrolltable css  gt   lt script src   path to easyscrolltable js  gt  lt  script gt    Javascript      table ytable   EasyScrollableTable        top     1         left    1         class            width    100         height    auto        footer   false       hover   true

User · Answer

I took Earmon Nerbonne s answer and edited it to work with tables that fill the whole width   http   jsfiddle net DYgD6 6    lt  DOCTYPE html gt   lt html gt  lt head gt  lt title gt testdoc lt  title gt   lt style type  text css  gt              body           font 16px Calibri            table           border-collapse separate          border-top  3px solid grey            td           margin 0          border 3px solid grey          border-top-width 0px          white-space nowrap             outerdiv           position  absolute          top  0          left  0          right  5em             innerdiv           width  100           overflow-x scroll          margin-left  5em          overflow-y visible          padding-bottom 1px             headcol           position absolute          width 5em          left 0          top auto          border-right  0px none black          border-top-width 3px            only relevant for first row           margin-top -3px            compensate for top border              headcol before           content  Row               long           background yellow          letter-spacing 1em         lt  style gt  lt  head gt  lt body gt     lt div id  outerdiv  gt      lt div id  innerdiv  gt       lt table gt           lt tr gt               lt td class  headcol  gt 1 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 2 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 3 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 4 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 5 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 6 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 7 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 8 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt           lt tr gt               lt td class  headcol  gt 9 lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt               lt td class  long  gt QWERTYUIOPASDFGHJKLZXCVBNM lt  td gt           lt  tr gt       lt  table gt   lt  div gt  lt  div gt   lt  body gt  lt  html gt    The width of the fixed column still needs to be a set value though

User · Answer

x000D   x000D    document  ready function     x000D      var table       example   DataTable    x000D          scrollY          400px   x000D          scrollX         true  x000D          scrollCollapse  true  x000D          paging          true  x000D          fixedColumns      x000D              leftColumns  3 x000D            x000D           x000D       x000D   lt head gt  x000D    lt title gt table lt  title gt  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdn datatables net 1 10 16 css jquery dataTables min css  gt  x000D   lt link rel  stylesheet  href  https   cdn datatables net fixedcolumns 3 2 4 css fixedColumns dataTables min css  gt  x000D   lt script type  text javascript  src  http   cdn datatables net 1 10 2 js jquery dataTables min js  gt  lt  script gt  x000D   lt script type  text javascript  src  https   code jquery com jquery-1 12 4 js  gt  lt  script gt  x000D   lt script type  text javascript  src  https   cdn datatables net 1 10 16 js jquery dataTables min js  gt  lt  script gt  x000D   lt script type  text javascript  src  https   cdn datatables net fixedcolumns 3 2 4 js dataTables fixedColumns min js  gt  lt  script gt  x000D   x000D   x000D   lt style gt  x000D         th  td   white-space  nowrap    x000D      div dataTables wrapper   x000D          width  900px  x000D          margin  0 auto  x000D        x000D   lt  style gt  x000D   x000D   lt  head gt  x000D   lt table id  example  class  stripe row-border order-column  style  width 100   gt  x000D           lt thead gt  x000D               lt tr gt  x000D                   lt th gt First name lt  th gt  x000D                   lt th gt Last name lt  th gt  x000D                   lt th gt Position lt  th gt  x000D                   lt th gt Office lt  th gt  x000D                   lt th gt Age lt  th gt  x000D                   lt th gt Start date lt  th gt  x000D                   lt th gt Salary lt  th gt  x000D                   lt th gt Extn  lt  th gt  x000D                   lt th gt E-mail lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody gt  x000D               lt tr gt  x000D                   lt td gt Tiger lt  td gt  x000D                   lt td gt Nixon lt  td gt  x000D                   lt td gt System Architect lt  td gt  x000D                   lt td gt Edinburgh lt  td gt  x000D                   lt td gt 61 lt  td gt  x000D                   lt td gt 2011 04 25 lt  td gt  x000D                   lt td gt  320 800 lt  td gt  x000D                   lt td gt 5421 lt  td gt  x000D                   lt td gt t nixon datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Garrett lt  td gt  x000D                   lt td gt Winters lt  td gt  x000D                   lt td gt Accountant lt  td gt  x000D                   lt td gt Tokyo lt  td gt  x000D                   lt td gt 63 lt  td gt  x000D                   lt td gt 2011 07 25 lt  td gt  x000D                   lt td gt  170 750 lt  td gt  x000D                   lt td gt 8422 lt  td gt  x000D                   lt td gt g winters datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Ashton lt  td gt  x000D                   lt td gt Cox lt  td gt  x000D                   lt td gt Junior Technical Author lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 66 lt  td gt  x000D                   lt td gt 2009 01 12 lt  td gt  x000D                   lt td gt  86 000 lt  td gt  x000D                   lt td gt 1562 lt  td gt  x000D                   lt td gt a cox datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Cedric lt  td gt  x000D                   lt td gt Kelly lt  td gt  x000D                   lt td gt Senior Javascript Developer lt  td gt  x000D                   lt td gt Edinburgh lt  td gt  x000D                   lt td gt 22 lt  td gt  x000D                   lt td gt 2012 03 29 lt  td gt  x000D                   lt td gt  433 060 lt  td gt  x000D                   lt td gt 6224 lt  td gt  x000D                   lt td gt c kelly datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Airi lt  td gt  x000D                   lt td gt Satou lt  td gt  x000D                   lt td gt Accountant lt  td gt  x000D                   lt td gt Tokyo lt  td gt  x000D                   lt td gt 33 lt  td gt  x000D                   lt td gt 2008 11 28 lt  td gt  x000D                   lt td gt  162 700 lt  td gt  x000D                   lt td gt 5407 lt  td gt  x000D                   lt td gt a satou datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Brielle lt  td gt  x000D                   lt td gt Williamson lt  td gt  x000D                   lt td gt Integration Specialist lt  td gt  x000D                   lt td gt New York lt  td gt  x000D                   lt td gt 61 lt  td gt  x000D                   lt td gt 2012 12 02 lt  td gt  x000D                   lt td gt  372 000 lt  td gt  x000D                   lt td gt 4804 lt  td gt  x000D                   lt td gt b williamson datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Herrod lt  td gt  x000D                   lt td gt Chandler lt  td gt  x000D                   lt td gt Sales Assistant lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 59 lt  td gt  x000D                   lt td gt 2012 08 06 lt  td gt  x000D                   lt td gt  137 500 lt  td gt  x000D                   lt td gt 9608 lt  td gt  x000D                   lt td gt h chandler datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Rhona lt  td gt  x000D                   lt td gt Davidson lt  td gt  x000D                   lt td gt Integration Specialist lt  td gt  x000D                   lt td gt Tokyo lt  td gt  x000D                   lt td gt 55 lt  td gt  x000D                   lt td gt 2010 10 14 lt  td gt  x000D                   lt td gt  327 900 lt  td gt  x000D                   lt td gt 6200 lt  td gt  x000D                   lt td gt r davidson datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Colleen lt  td gt  x000D                   lt td gt Hurst lt  td gt  x000D                   lt td gt Javascript Developer lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 39 lt  td gt  x000D                   lt td gt 2009 09 15 lt  td gt  x000D                   lt td gt  205 500 lt  td gt  x000D                   lt td gt 2360 lt  td gt  x000D                   lt td gt c hurst datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Sonya lt  td gt  x000D                   lt td gt Frost lt  td gt  x000D                   lt td gt Software Engineer lt  td gt  x000D                   lt td gt Edinburgh lt  td gt  x000D                   lt td gt 23 lt  td gt  x000D                   lt td gt 2008 12 13 lt  td gt  x000D                   lt td gt  103 600 lt  td gt  x000D                   lt td gt 1667 lt  td gt  x000D                   lt td gt s frost datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Jena lt  td gt  x000D                   lt td gt Gaines lt  td gt  x000D                   lt td gt Office Manager lt  td gt  x000D                   lt td gt London lt  td gt  x000D                   lt td gt 30 lt  td gt  x000D                   lt td gt 2008 12 19 lt  td gt  x000D                   lt td gt  90 560 lt  td gt  x000D                   lt td gt 3814 lt  td gt  x000D                   lt td gt j gaines datatables net lt  td gt  x000D               lt  tr gt  x000D                lt tr gt  x000D                   lt td gt Sakura lt  td gt  x000D                   lt td gt Yamamoto lt  td gt  x000D                   lt td gt Support Engineer lt  td gt  x000D                   lt td gt Tokyo lt  td gt  x000D                   lt td gt 37 lt  td gt  x000D                   lt td gt 2009 08 19 lt  td gt  x000D                   lt td gt  139 575 lt  td gt  x000D                   lt td gt 9383 lt  td gt  x000D                   lt td gt s yamamoto datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Thor lt  td gt  x000D                   lt td gt Walton lt  td gt  x000D                   lt td gt Developer lt  td gt  x000D                   lt td gt New York lt  td gt  x000D                   lt td gt 61 lt  td gt  x000D                   lt td gt 2013 08 11 lt  td gt  x000D                   lt td gt  98 540 lt  td gt  x000D                   lt td gt 8327 lt  td gt  x000D                   lt td gt t walton datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Finn lt  td gt  x000D                   lt td gt Camacho lt  td gt  x000D                   lt td gt Support Engineer lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 47 lt  td gt  x000D                   lt td gt 2009 07 07 lt  td gt  x000D                   lt td gt  87 500 lt  td gt  x000D                   lt td gt 2927 lt  td gt  x000D                   lt td gt f camacho datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Serge lt  td gt  x000D                   lt td gt Baldwin lt  td gt  x000D                   lt td gt Data Coordinator lt  td gt  x000D                   lt td gt Singapore lt  td gt  x000D                   lt td gt 64 lt  td gt  x000D                   lt td gt 2012 04 09 lt  td gt  x000D                   lt td gt  138 575 lt  td gt  x000D                   lt td gt 8352 lt  td gt  x000D                   lt td gt s baldwin datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Zenaida lt  td gt  x000D                   lt td gt Frank lt  td gt  x000D                   lt td gt Software Engineer lt  td gt  x000D                   lt td gt New York lt  td gt  x000D                   lt td gt 63 lt  td gt  x000D                   lt td gt 2010 01 04 lt  td gt  x000D                   lt td gt  125 250 lt  td gt  x000D                   lt td gt 7439 lt  td gt  x000D                   lt td gt z frank datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Zorita lt  td gt  x000D                   lt td gt Serrano lt  td gt  x000D                   lt td gt Software Engineer lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 56 lt  td gt  x000D                   lt td gt 2012 06 01 lt  td gt  x000D                   lt td gt  115 000 lt  td gt  x000D                   lt td gt 4389 lt  td gt  x000D                   lt td gt z serrano datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Jennifer lt  td gt  x000D                   lt td gt Acosta lt  td gt  x000D                   lt td gt Junior Javascript Developer lt  td gt  x000D                   lt td gt Edinburgh lt  td gt  x000D                   lt td gt 43 lt  td gt  x000D                   lt td gt 2013 02 01 lt  td gt  x000D                   lt td gt  75 650 lt  td gt  x000D                   lt td gt 3431 lt  td gt  x000D                   lt td gt j acosta datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Cara lt  td gt  x000D                   lt td gt Stevens lt  td gt  x000D                   lt td gt Sales Assistant lt  td gt  x000D                   lt td gt New York lt  td gt  x000D                   lt td gt 46 lt  td gt  x000D                   lt td gt 2011 12 06 lt  td gt  x000D                   lt td gt  145 600 lt  td gt  x000D                   lt td gt 3990 lt  td gt  x000D                   lt td gt c stevens datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Hermione lt  td gt  x000D                   lt td gt Butler lt  td gt  x000D                   lt td gt Regional Director lt  td gt  x000D                   lt td gt London lt  td gt  x000D                   lt td gt 47 lt  td gt  x000D                   lt td gt 2011 03 21 lt  td gt  x000D                   lt td gt  356 250 lt  td gt  x000D                   lt td gt 1016 lt  td gt  x000D                   lt td gt h butler datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Lael lt  td gt  x000D                   lt td gt Greer lt  td gt  x000D                   lt td gt Systems Administrator lt  td gt  x000D                   lt td gt London lt  td gt  x000D                   lt td gt 21 lt  td gt  x000D                   lt td gt 2009 02 27 lt  td gt  x000D                   lt td gt  103 500 lt  td gt  x000D                   lt td gt 6733 lt  td gt  x000D                   lt td gt l greer datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Jonas lt  td gt  x000D                   lt td gt Alexander lt  td gt  x000D                   lt td gt Developer lt  td gt  x000D                   lt td gt San Francisco lt  td gt  x000D                   lt td gt 30 lt  td gt  x000D                   lt td gt 2010 07 14 lt  td gt  x000D                   lt td gt  86 500 lt  td gt  x000D                   lt td gt 8196 lt  td gt  x000D                   lt td gt j alexander datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Shad lt  td gt  x000D                   lt td gt Decker lt  td gt  x000D                   lt td gt Regional Director lt  td gt  x000D                   lt td gt Edinburgh lt  td gt  x000D                   lt td gt 51 lt  td gt  x000D                   lt td gt 2008 11 13 lt  td gt  x000D                   lt td gt  183 000 lt  td gt  x000D                   lt td gt 6373 lt  td gt  x000D                   lt td gt s decker datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Michael lt  td gt  x000D                   lt td gt Bruce lt  td gt  x000D                   lt td gt Javascript Developer lt  td gt  x000D                   lt td gt Singapore lt  td gt  x000D                   lt td gt 29 lt  td gt  x000D                   lt td gt 2011 06 27 lt  td gt  x000D                   lt td gt  183 000 lt  td gt  x000D                   lt td gt 5384 lt  td gt  x000D                   lt td gt m bruce datatables net lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Donna lt  td gt  x000D                   lt td gt Snider lt  td gt  x000D                   lt td gt Customer Support lt  td gt  x000D                   lt td gt New York lt  td gt  x000D                   lt td gt 27 lt  td gt  x000D                   lt td gt 2011 01 25 lt  td gt  x000D                   lt td gt  112 000 lt  td gt  x000D                   lt td gt 4226 lt  td gt  x000D                   lt td gt d snider datatables net lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   x000D   x000D    This can be easily done with the help of datatables  People who are new to data tables  please refer to https   datatables net   Its a plugin and offers a lot of features In the the code given  header is fixed first 3 columns are fixed and several other features are also there

User · Answer

In HTML5  you can use CSS style transform  However  i reccomend you  swipe between pages  turn off If you implement on Mac   look at sample codePen   x000D   x000D  let l    0  x000D  let t    0  x000D   x000D  const MouseWheelHandler    e    gt    x000D       vertical scroll x000D    if  e deltaX    -0    x000D         t   t - e deltaY x000D   x000D       horizonal scroll x000D      else if  e deltaY    -0    x000D      l   l - e deltaX x000D      if  l  gt   0    x000D        l   0  x000D        document getElementById  gantt task   style transform    translateX 1px   x000D        document getElementById  gantt task header   style transform    translateX 1px   x000D        return false x000D         x000D      document getElementById  gantt task   style transform    translateX     l toString      px   x000D      document getElementById  gantt task header   style transform    translateX     l toString      px   x000D      x000D    return false  x000D    x000D   x000D  window addEventListener  wheel   MouseWheelHandler  false   x000D   row   x000D    border-bottom  1px solid  979A9A x000D    x000D   gantt grid header   x000D    height    30px  x000D    width     100px  x000D    position  fixed  x000D    z-index   3  x000D    top       0px  x000D    left      0px  x000D    border    1px solid  cecece  x000D    background-color   F08080  x000D         x000D   x000D   gantt task header   x000D    height    30px  x000D    width     400px  x000D    position  fixed  x000D    z-index   2  x000D    top       0px  x000D    left      100px  x000D    border    1px solid  cecece  x000D    background-color   FFC300  x000D    x000D   x000D   gantt grid   x000D    width     100px   x000D    height    400px  x000D    position  absolute  x000D    left      0px  x000D    top       0px  x000D    z-index   1  x000D    border    1px solid  cecece  x000D    background-color   DAF7A6  x000D    x000D   x000D   gantt task   x000D    width     400px   x000D    height    400px  x000D    position  absolute  x000D    left      100px  x000D    top       0px  x000D    border    1px solid  cecece  x000D    background-color   FF5733  x000D    x000D   lt html gt  x000D       lt div id  gantt grid header  gt  x000D        HEADER x000D       lt  div gt  x000D       lt div id  gantt grid  gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D         lt div class  row  gt V Scroll OK lt  div gt  x000D       lt  div gt  x000D       lt div id  gantt task header  gt  x000D        DATA HEADER x000D       lt  div gt  x000D       lt div id  gantt task  gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D         lt div class  row  gt Vertical Horizenal Scroll OK lt  div gt  x000D       lt  div gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you re in Webdevelopper hell and need to make this work for IE6  here s a sample code I used    lt html gt   lt head gt   lt style type  text css  gt   fixme       position  relative      left  expression    20     ignoreMe2   document documentElement scrollLeft   document documentElement scrollLeft   document body scrollLeft        px         background-color   FFFFFF     lt  style gt   lt  head gt   lt body gt   lt table width  1500px  border  2  gt       lt tr gt           lt td class  fixme  style  width  200px   gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt       lt  tr gt       lt tr gt           lt td class  fixme  style  width  200px   gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt       lt  tr gt       lt tr gt           lt td class  fixme  style  width  200px   gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt       lt  tr gt       lt tr gt           lt td class  fixme  style  width  200px   gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt           lt td gt loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet loremp ispum dolor sit amet  lt  td gt       lt  tr gt   lt  table gt   lt  body gt   lt  html gt    This will work probably ONLY for IE6  so use conditional comments for the CSS

User · Answer

Opera was buggy for all of the previous answers when I tested them on my mac. If you scroll through the table the fixed column disappears after you pass the first unfixed column. I went ahead and wrote the code below. It works in all the browsers I have locally installed. I don't know how ie handles it though.

Just keep that in mind that if you intend to skip rows in one table and not the other or change the heights of the rows you might need to adjust this code.

<table class = "fixedColumns">
    <tr><td> row 1 </td></tr>
    <tr><td> row 2 </td></tr>
</table>
<table class = "scrollableTable">
    <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
    <tr><td> col 1 </td> <td> col 2 </td><td> col 3 </td><td> col 4 </td></tr>
</table>

<style type = "text/css" >
    .fixedColumns
    {
        vertical-align:top;
        display: inline-block;
    }
    .scrollableTable
    {
        display: inline-block;
        width:50px;
        white-space: nowrap;
        overflow-x: scroll;
    }
</style>

User · Answer

For me this was the only one that worked perfectly (thanks to Paul O'Brien!): https://codepen.io/paulobrien/pen/gWoVzN

Here's the snippet:

_x000D_

// requires jquery library_x000D_
jQuery(document).ready(function() {_x000D_
  jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');   _x000D_
 });

_x000D_

  .table-scroll {_x000D_
    position:relative;_x000D_
    max-width:600px;_x000D_
    margin:auto;_x000D_
    overflow:hidden;_x000D_
    border:1px solid #000;_x000D_
  }_x000D_
.table-wrap {_x000D_
 width:100%;_x000D_
 overflow:auto;_x000D_
}_x000D_
.table-scroll table {_x000D_
 width:100%;_x000D_
 margin:auto;_x000D_
 border-collapse:separate;_x000D_
 border-spacing:0;_x000D_
}_x000D_
.table-scroll th, .table-scroll td {_x000D_
 padding:5px 10px;_x000D_
 border:1px solid #000;_x000D_
 background:#fff;_x000D_
 white-space:nowrap;_x000D_
 vertical-align:top;_x000D_
}_x000D_
.table-scroll thead, .table-scroll tfoot {_x000D_
 background:#f9f9f9;_x000D_
}_x000D_
.clone {_x000D_
 position:absolute;_x000D_
 top:0;_x000D_
 left:0;_x000D_
 pointer-events:none;_x000D_
}_x000D_
.clone th, .clone td {_x000D_
 visibility:hidden_x000D_
}_x000D_
.clone td, .clone th {_x000D_
 border-color:transparent_x000D_
}_x000D_
.clone tbody th {_x000D_
 visibility:visible;_x000D_
 color:red;_x000D_
}_x000D_
.clone .fixed-side {_x000D_
 border:1px solid #000;_x000D_
 background:#eee;_x000D_
 visibility:visible;_x000D_
}_x000D_
.clone thead, .clone tfoot{background:transparent;}

_x000D_

<div id="table-scroll" class="table-scroll">_x000D_
  <div class="table-wrap">_x000D_
    <table class="main-table">_x000D_
      <thead>_x000D_
        <tr>_x000D_
          <th class="fixed-side" scope="col">&nbsp;</th>_x000D_
          <th scope="col">Header 2</th>_x000D_
          <th scope="col">Header 3</th>_x000D_
          <th scope="col">Header 4</th>_x000D_
          <th scope="col">Header 5</th>_x000D_
          <th scope="col">Header 6</th>_x000D_
          <th scope="col">Header 7</th>_x000D_
          <th scope="col">Header 8</th>_x000D_
        </tr>_x000D_
      </thead>_x000D_
      <tbody>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content<br>_x000D_
            test</td>_x000D_
          <td><a href="#">Cell content longer</a></td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content longer</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content longer</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content longer</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content longer</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <th class="fixed-side">Left Column</th>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content longer</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
          <td>Cell content</td>_x000D_
        </tr>_x000D_
      </tbody>_x000D_
      <tfoot>_x000D_
        <tr>_x000D_
          <th class="fixed-side">&nbsp;</th>_x000D_
          <td>Footer 2</td>_x000D_
          <td>Footer 3</td>_x000D_
          <td>Footer 4</td>_x000D_
          <td>Footer 5</td>_x000D_
          <td>Footer 6</td>_x000D_
          <td>Footer 7</td>_x000D_
          <td>Footer 8</td>_x000D_
        </tr>_x000D_
      </tfoot>_x000D_
    </table>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<p>See <a href="https://codepen.io/paulobrien/pen/LBrMxa" target="blank">position Sticky version </a>with no JS</p>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

_x000D_

User · Answer

No need to add any plugin  CSS can do this job      The idea is to make the position of all the first cells in each column absolute  and make width fixed   Ex   max-width  125px  min-width  125px  position  absolute    This hides some parts of some columns under the first column  so add an empty second column  add second empty td  with width same as the first column   I tested and this works in Chrome and Firefox

User · Answer

You can use sticky position  Here is a sample code  This is HTML CSS solution  No js is required   x000D   x000D   view     margin  auto    width  600px      wrapper     position  relative    overflow  auto    border  1px solid black    white-space  nowrap      sticky-col     position  -webkit-sticky    position  sticky    background-color  white      first-col     width  100px    min-width  100px    max-width  100px    left  0px      second-col     width  150px    min-width  150px    max-width  150px    left  100px    x000D   lt div class  view  gt     lt div class  wrapper  gt       lt table class  table  gt         lt thead gt           lt tr gt             lt th class  sticky-col first-col  gt Number lt  th gt             lt th class  sticky-col second-col  gt First Name lt  th gt             lt th gt Last Name lt  th gt             lt th gt Employer lt  th gt           lt  tr gt         lt  thead gt         lt tbody gt           lt tr gt             lt td class  sticky-col first-col  gt 1 lt  td gt             lt td class  sticky-col second-col  gt Mark lt  td gt             lt td gt Ham lt  td gt             lt td gt Micro lt  td gt           lt  tr gt           lt tr gt             lt td class  sticky-col first-col  gt 2 lt  td gt             lt td class  sticky-col second-col  gt Jacob lt  td gt             lt td gt Smith lt  td gt             lt td gt Adob Adob Adob AdobAdob Adob Adob Adob Adob lt  td gt           lt  tr gt           lt tr gt             lt td class  sticky-col first-col  gt 3 lt  td gt             lt td class  sticky-col second-col  gt Larry lt  td gt             lt td gt Wen lt  td gt             lt td gt Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog lt  td gt           lt  tr gt         lt  tbody gt       lt  table gt     lt  div gt   lt  div gt  x000D   x000D   x000D   Bootply code  https   www bootply com g8pfBXOcY9

User · Answer

You can just make the first column position  sticky  z-index  9  It will make the column row stick to its current position  Checkout my example codepen here https   codepen io swastikmishra pen zYYdKBQ  HTML Example   lt style type  text css  gt              table  text-align  center                 table-container  width  500px  height  300px  overflow  scroll               table th  table td                   white-space  nowrap                  padding  10px 20px                  font-family  Arial                            table tr th first-child  table td first-child                  position  sticky                  width  100px                  left  0                  z-index  10                  background   fff                            table tr th first-child                  z-index  11                            table tr th                  position  sticky                  top  0                  z-index  9                  background   fff                         lt  style gt           lt div class  table-container  gt               lt table gt                   lt tr gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt th gt Hello World lt  th gt  lt  tr gt                   lt tr gt  lt td gt H11 lt  td gt  lt td gt H12 lt  td gt  lt td gt H13 lt  td gt  lt td gt H14 lt  td gt  lt td gt H15 lt  td gt  lt td gt H16 lt  td gt  lt td gt H17 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H21 lt  td gt  lt td gt H22 lt  td gt  lt td gt H23 lt  td gt  lt td gt H24 lt  td gt  lt td gt H25 lt  td gt  lt td gt H26 lt  td gt  lt td gt H27 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H31 lt  td gt  lt td gt H32 lt  td gt  lt td gt H33 lt  td gt  lt td gt H34 lt  td gt  lt td gt H35 lt  td gt  lt td gt H36 lt  td gt  lt td gt H37 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H41 lt  td gt  lt td gt H42 lt  td gt  lt td gt H44 lt  td gt  lt td gt H44 lt  td gt  lt td gt H45 lt  td gt  lt td gt H46 lt  td gt  lt td gt H47 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H51 lt  td gt  lt td gt H52 lt  td gt  lt td gt H54 lt  td gt  lt td gt H54 lt  td gt  lt td gt H55 lt  td gt  lt td gt H56 lt  td gt  lt td gt H57 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H61 lt  td gt  lt td gt H62 lt  td gt  lt td gt H64 lt  td gt  lt td gt H64 lt  td gt  lt td gt H65 lt  td gt  lt td gt H66 lt  td gt  lt td gt H67 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H71 lt  td gt  lt td gt H72 lt  td gt  lt td gt H74 lt  td gt  lt td gt H74 lt  td gt  lt td gt H75 lt  td gt  lt td gt H76 lt  td gt  lt td gt H77 lt  td gt  lt  tr gt                   lt tr gt  lt td gt H81 lt  td gt  lt td gt H82 lt  td gt  lt td gt H84 lt  td gt  lt td gt H84 lt  td gt  lt td gt H85 lt  td gt  lt td gt H86 lt  td gt  lt td gt H87 lt  td gt  lt  tr gt               lt  table gt           lt  div gt

[html] How do I create an HTML table with a fixed/frozen left column and a scrollable body?

The answer is

Examples related to html

Examples related to css

Examples related to html-table

Tags