How can I lock the first row and first column of a table when scrolling possibly using JavaScript and CSS

Question

How can I create a table that has its first row and first column both locked, as in Excel, when you activate 'freeze panes'? I need the table to both scroll horizontally and vertically (a lot of solutions for this exist, but only allow vertical scrolling).

So, when you scroll down in the table, the first row will stay put, since it will have the column headings. This may end up being in a thead, or it may not, whatever makes the solution easier.

When you scroll right, the first column stays put, since it holds the labels for the rows.

I'm pretty certain this is impossible with CSS alone, but can anyone point me toward a JavaScript solution? It needs to work in all major browsers.

User · Answer

You d have to test it but if you embedded an iframe within your page then used CSS to absolutely position the 1st row  amp  column at 0 0 in the iframe page would that solve your problem

User · Answer

You d have to test it but if you embedded an iframe within your page then used CSS to absolutely position the 1st row  amp  column at 0 0 in the iframe page would that solve your problem

User · Answer

Oh well  I looked up for scrollable table with fixed column to understand the need of this specific requirement and your question was one of it with no close answers     I answered this question Large dynamically sized html table with a fixed scroll row and fixed scroll column which inspired to showcase my work as a plugin https   github com meetselva fixed-table-rows-cols  The plugin basically converts a well formatted HTML table to a scrollable table with fixed table header and columns   The usage is as below       myTable   fxdHdrCol       fixedCols      3           3 fixed columns        width           100        set the width of the container  fixed or percentage        height         500         set the height of the container          You can check the demo and documentation here

User · Answer

How about a solution where you put the actual "data" of the table inside its own div, with overflow: scroll;? Then the browser will automatically create scrollbars for the portion of the "table" you do not want to lock, and you can put the "table header"/first row just above that <div>.

Not sure how that would work with scrolling horizontally though.

User · Answer

Here a plugin JQuery  https   github com nitsugario jQuery-Freeze-Table-Column-and-Rows  This is a jQuery plugin that can make table rows and columns not scroll   It can take a given HTML table object and set it so it can freeze a given number of columns or rows or both  so the fixed columns or rows do not scroll   The rows to be frozen should be placed in the table head section   It can also freeze rows and columns combined with using colspan or rowspan attributes

User · Answer

You can do it  without javascript  see this link  http   yonax73 blogspot com 2014 09 tabla-con-cabecera-estatica-cuerpo-con html  or live demo  http   jsfiddle net yonatanalexis22 aeeme8mt 7   table  border-spacing  0  display  flex   Se ajuste dinamicamente al tamano del dispositivo    max-height  40vh    El alto que necesitemos    overflow-y  auto     El scroll verticalmente cuando sea necesario   overflow-x  hidden   Sin scroll horizontal   table-layout  fixed    Forzamos a que las filas tenga el mismo ancho    width  98vw    El ancho que necesitemos   border 1px solid gray

User · Answer

Sort and Lock Table is the only solution I have seen which does work on other browsers than IE   although this  locked column css  might do the trick as well    Required code block below    lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt     lt meta name  robots  content  noindex  nofollow  gt     lt meta name  googlebot  content  noindex  nofollow  gt     lt script type  text javascript  src   js lib dummy js  gt  lt  script gt       lt link rel  stylesheet  type  text css  href   css result-light css  gt     lt style type  text css  gt         Scrollable Content Height     scrollContent    height 100px   overflow-x hidden   overflow-y auto     scrollContent tr    height  auto   white-space  nowrap        Prevent Mozilla scrollbar from hiding right-most cell content     scrollContent tr td last-child    padding-right  20px        Fixed Header Height     fixedHeader tr    position  relative   height  auto        Put border around entire table    div TableContainer    border  1px solid  7DA87D        Table Header formatting     headerFormat    background-color  white   color   FFFFFF   margin  3px   padding  1px   white-space  nowrap   font-family  Helvetica   font-size  16px   text-decoration  none   font-weight  bold     headerFormat tr td    border  1px solid  000000   background-color   7DA87D        Table Body  Scrollable Content  formatting     bodyFormat tr td       color   000000      margin  3px      padding  1px      border  0px none      font-family  Helvetica      font-size  12px        Use to set different color for alternating rows     alternateRow     background-color   E0F1E0        Styles used for SORTING     point    cursor pointer    td sortedColumn     background-color   E0F1E0     tr alternateRow td sortedColumn     background-color   c5e5c5     total       background-color   FED362      color   000000      white-space  nowrap      font-size  12px      text-decoration  none       lt  style gt      lt title gt  lt  title gt   lt script type  text javascript  gt    lt   CDATA      This script and many more are available free online at The JavaScript Source    http   www javascriptsource com Created by  Stan Slaughter    http   www stansight com                                                                Generic Table Sort  Basic Concept  A table can be sorted by clicking on the title of any column in the table  toggling between ascending and descending sorts    Assumptions     The first row of the table contains column titles that are  clicked    to sort the table    The images  desc gif   asc gif   none gif   sorting gif  exist    The img tag is in each column of the the title row to represent the   sort graphic     The CSS classes  alternateRow  and  sortedColumn  exist so we can   have alternating colors for each row and a highlight the sorted   column   Something like the  lt style gt  definition below  but with the   background colors set to whatever you want       lt style gt     tr alternateRow        background-color   E0F1E0           td sortedColumn        background-color   E0F1E0           tr alternateRow td sortedColumn        background-color   c5e5c5           lt  style gt                                                              function sortTable td element ignoreLastLines          If the optional ignoreLastLines parameter  number of lines  not  to sort at end of table       was not passed then make it 0   ignoreLastLines    typeof ignoreLastLines    undefined     0   ignoreLastLines     var sortImages    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUz4IVcZDleixQIQjA1pFFZx2FVRklZvOWUl8LsVgBeFLyE8TLgDZYESISwvAAA1QvjAQwBADs    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUw4CVeDzOeFwCgIhFBBDtY1sAmtIIWFV0VJweNRhkZeoeDpWIQNSYBgSAgWYgQLGwIADs    data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7   http   web archive org web 20150906203819im  http   www javascriptsource com miscellaneous sorting gif          Get the image used in the first row of the current column   var sortColImage   td element getElementsByTagName  img   0         If current image is  asc gif  or  none gif   elements 1 and 2 of sortImages array  then this will      be a descending sort else it will be ascending - get new sort image icon and set sort order flag   var sortAscending   false    var newSortColImage         if  sortColImage getAttribute  src   indexOf sortImages 1   gt -1        sortColImage getAttribute  src   indexOf sortImages 2   gt -1        newSortColImage   sortImages 0       sortAscending   false      else       newSortColImage   sortImages 1       sortAscending   true            Assign  SORTING  image icon  element 3 of sortImages array   to current column title       will replace with newSortColImage when sort completes    sortColImage setAttribute  src  sortImages 3          Find which column was clicked by getting it s column position   var indexCol   td element cellIndex        Get the table element from the td element that was passed as a parameter to this function   var table element   td element parentNode    while  table element nodeName     TABLE         table element   table element parentNode            Get all  tr  elements from the table and assign then to the Array  tr elements    var tr elements   table element getElementsByTagName  tr          Get all the images used in the first row then set them to  none gif        element 2 or sortImages array  except for the current column  all ready been changed    var allImg   tr elements 0  getElementsByTagName  img        for var i 0 i lt allImg length i         if allImg i   sortColImage  allImg i  setAttribute  src  sortImages 2              Some explantion of the basic concept of the following code before we      actually start   Essentially we are going to copy the current columns information      into an array to be sorted  We ll sort the column array then go back and use the information      we saved about the original row positions to re-order the entire table       We are never really sorting more than a columns worth of data  which should keep the sorting fast        Create a new array for holding row information   var clonedRows   new Array         Create a new array to store just the selected column values  not the whole row   var originalCol   new Array          Now loop through all the data row elements      NOTE  Starting at row 1 because row 0 contains the column titles   for  var i 1  i lt tr elements length - ignoreLastLines  i              Clone  the tr element i e  save a copy all of its attributes and values    clonedRows i  tr elements i  cloneNode true          Text value of the selected column on this row    var valueCol   getTextValue tr elements i  cells indexCol           Format text value for sorting depending on its type  ie Date  Currency  number  etc      valueCol   FormatForType valueCol          Assign the column value AND the row number it was originally on in the table    originalCol i   valueCol tr elements i  rowIndex             Get rid of element  0  from this array   A value was never assigned to it because the first row      in the table just contained the column titles  which we did not bother to assign    originalCol shift          Sort the column array returning the value of a sort into a new array   sortCol   originalCol sort sortCompare         If it was supposed to be an Ascending sort then reverse the order   if  sortAscending    sortCol reverse            Now take the values from the sorted column array and use that information to re-arrange      the order of the tr elements in the table   for  var i 1  i  lt  tr elements length - ignoreLastLines  i           var old row   sortCol i-1  1       var new row   i      tr elements i  parentNode replaceChild clonedRows old row  tr elements new row               Format the table  making the rows alternating colors and highlight the sorted column    makePretty table element indexCol ignoreLastLines         Assign correct sort image icon to current column title   sortColImage setAttribute  src  newSortColImage         Function used by the sort routine to compare the current value in the array with the next one function sortCompare  currValue  nextValue        Since the elements of this array are actually arrays themselves  just sort     on the first element which contiains the value  not the second which contains     the original row position   if   currValue 0     nextValue 0    return 0    if   currValue 0   lt  nextValue 0    return -1    if   currValue 0   gt  nextValue 0    return 1       -----------------------------------------------------------------------------    Functions to get and compare values during a sort    -----------------------------------------------------------------------------     This code is necessary for browsers that don t reflect the DOM constants     like IE   if  document ELEMENT NODE    null       document ELEMENT NODE   1     document TEXT NODE   3     function getTextValue el      var i    var s       Find and concatenate the values of all text nodes contained within the      element    s         for  i   0  i  lt  el childNodes length  i        if  el childNodes i  nodeType    document TEXT NODE        s    el childNodes i  nodeValue      else if  el childNodes i  nodeType    document ELEMENT NODE  amp  amp               el childNodes i  tagName     BR         s             else          Use recursion to get text within sub-elements        s    getTextValue el childNodes i       return normalizeString s         Regular expressions for normalizing white space  var whtSpEnds   new RegExp     s    s      g    var whtSpMult   new RegExp    s  s     g     function normalizeString s      s   s replace whtSpMult            Collapse any multiple whites space    s   s replace whtSpEnds            Remove leading or trailing white space    return s        Function used to modify values to make then sortable depending on the type of information function FormatForType itm      var sortValue   itm toLowerCase          If the item matches a date pattern  MM DD YYYY or MM DD YY or M DD YYYY    if  itm match    d d   -  d d   -  d d d d             itm match    d d   -  d d   -  d d             itm match    d   -  d d   -  d d d d                Convert date to YYYYMMDD format for sort comparison purposes        y2k notes  two digit years less than 50 are treated as 20XX  greater than 50 are treated as 19XX     var yr   -1       if  itm length    10          sortValue   itm substr 6 4  itm substr 0 2  itm substr 3 2          else if  itm length    9          sortValue   itm substr 5 4   0    itm substr 0 1  itm substr 2 2         else         yr   itm substr 6 2         if  parseInt yr   lt  50            yr    20  yr          else           yr    19  yr                  sortValue   yr itm substr 3 2  itm substr 0 2                      If the item matches a Percent patten  contains a percent sign    if  itm match               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         sortValue   parseFloat sortValue             If item starts with a     and ends with a     then remove them and put a negative sign in front   if  itm substr 0 1          amp  itm substr itm length - 1 1               itm    -    itm substr 1 itm length - 2           If the item matches a currency pattern  starts with a dollar or negative dollar sign    if  itm match           -             Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue                If the item matches a numeric pattern   if  itm match    d   d      -  d d    d      -  d d      -    d d               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g           sortValue   sortValue replace    g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue               return sortValue       -----------------------------------------------------------------------------    Functions to update the table appearance after a sort    -----------------------------------------------------------------------------     Style class names  var rowClsNm    alternateRow   var colClsNm    sortedColumn       Regular expressions for setting class names  var rowTest   new RegExp rowClsNm   gi    var colTest   new RegExp colClsNm   gi     function makePretty tblEl  col  ignoreLastLines       var i  j    var rowEl  cellEl        Set style classes on each row to alternate their appearance    for  i   1  i  lt  tblEl rows length - ignoreLastLines  i         rowEl   tblEl rows i      rowEl className   rowEl className replace rowTest           if  i   2    0        rowEl className          rowClsNm      rowEl className   normalizeString rowEl className          Set style classes on each column  other than the name column  to        highlight the one that was sorted      for  j   0  j  lt  tblEl rows i  cells length  j            cellEl   rowEl cells j         cellEl className   cellEl className replace colTest             if  j    col          cellEl className          colClsNm        cellEl className   normalizeString cellEl className                     END Generic Table sort                                                            Function to scroll to top before sorting to fix an IE bug    Which repositions the header off the top of the screen    if you try to sort while scrolled to bottom  function GoTop      document getElementById  TableContainer   scrollTop   0          gt    lt  script gt   lt  head gt   lt body gt     lt table cellpadding  0  cellspacing  0  border  0  gt   lt tr gt  lt td gt   lt div id  TableContainer  class  TableContainer  style  height 230px   gt   lt table class  scrollTable  gt    lt thead class  fixedHeader headerFormat  gt     lt tr gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  gt  lt b gt NAME lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Amt lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Lvl lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Rank lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Position lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Date lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt     lt  tr gt    lt  thead gt    lt tbody class  scrollContent bodyFormat  style  height 200px   gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 23423  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 32  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 1  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 59  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 534 23  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 42  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 2  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt  -10 42   lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt - 19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt  -10 01   lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt -10 20  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  total  gt       lt td gt  lt strong gt TOTAL lt  strong gt   lt  td gt       lt td align  right  gt  lt strong gt 999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 9999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 99 lt  strong gt  lt  td gt       lt td  gt   lt  td gt       lt td align  right  gt   lt  td gt      lt  tr gt    lt  tbody gt   lt  table gt   lt  div gt   lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

You d have to test it but if you embedded an iframe within your page then used CSS to absolutely position the 1st row  amp  column at 0 0 in the iframe page would that solve your problem

User · Answer

I ran across a site a few weeks back  This is a working example of the first column locked but it is not browser compatible with Firefox  I didn t do a lot of checking around but it seems it only works in IE  There are some notes the author provided along with it that you can read   Lock the First column  http   home tampabay rr com bmerkey examples locked-column-csv html  Let me know if you need the Javascript to lock the Table headers too

User · Answer

There are quite a few cross browser solutions for this today  among which are SuperTable which I like due to its elegance and simplicity  now being continued with MooGrid  and SlickGrid with its awesome set of features

User · Answer

I ran across a site a few weeks back  This is a working example of the first column locked but it is not browser compatible with Firefox  I didn t do a lot of checking around but it seems it only works in IE  There are some notes the author provided along with it that you can read   Lock the First column  http   home tampabay rr com bmerkey examples locked-column-csv html  Let me know if you need the Javascript to lock the Table headers too

User · Answer

Sort and Lock Table is the only solution I have seen which does work on other browsers than IE   although this  locked column css  might do the trick as well    Required code block below    lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt     lt meta name  robots  content  noindex  nofollow  gt     lt meta name  googlebot  content  noindex  nofollow  gt     lt script type  text javascript  src   js lib dummy js  gt  lt  script gt       lt link rel  stylesheet  type  text css  href   css result-light css  gt     lt style type  text css  gt         Scrollable Content Height     scrollContent    height 100px   overflow-x hidden   overflow-y auto     scrollContent tr    height  auto   white-space  nowrap        Prevent Mozilla scrollbar from hiding right-most cell content     scrollContent tr td last-child    padding-right  20px        Fixed Header Height     fixedHeader tr    position  relative   height  auto        Put border around entire table    div TableContainer    border  1px solid  7DA87D        Table Header formatting     headerFormat    background-color  white   color   FFFFFF   margin  3px   padding  1px   white-space  nowrap   font-family  Helvetica   font-size  16px   text-decoration  none   font-weight  bold     headerFormat tr td    border  1px solid  000000   background-color   7DA87D        Table Body  Scrollable Content  formatting     bodyFormat tr td       color   000000      margin  3px      padding  1px      border  0px none      font-family  Helvetica      font-size  12px        Use to set different color for alternating rows     alternateRow     background-color   E0F1E0        Styles used for SORTING     point    cursor pointer    td sortedColumn     background-color   E0F1E0     tr alternateRow td sortedColumn     background-color   c5e5c5     total       background-color   FED362      color   000000      white-space  nowrap      font-size  12px      text-decoration  none       lt  style gt      lt title gt  lt  title gt   lt script type  text javascript  gt    lt   CDATA      This script and many more are available free online at The JavaScript Source    http   www javascriptsource com Created by  Stan Slaughter    http   www stansight com                                                                Generic Table Sort  Basic Concept  A table can be sorted by clicking on the title of any column in the table  toggling between ascending and descending sorts    Assumptions     The first row of the table contains column titles that are  clicked    to sort the table    The images  desc gif   asc gif   none gif   sorting gif  exist    The img tag is in each column of the the title row to represent the   sort graphic     The CSS classes  alternateRow  and  sortedColumn  exist so we can   have alternating colors for each row and a highlight the sorted   column   Something like the  lt style gt  definition below  but with the   background colors set to whatever you want       lt style gt     tr alternateRow        background-color   E0F1E0           td sortedColumn        background-color   E0F1E0           tr alternateRow td sortedColumn        background-color   c5e5c5           lt  style gt                                                              function sortTable td element ignoreLastLines          If the optional ignoreLastLines parameter  number of lines  not  to sort at end of table       was not passed then make it 0   ignoreLastLines    typeof ignoreLastLines    undefined     0   ignoreLastLines     var sortImages    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUz4IVcZDleixQIQjA1pFFZx2FVRklZvOWUl8LsVgBeFLyE8TLgDZYESISwvAAA1QvjAQwBADs    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUw4CVeDzOeFwCgIhFBBDtY1sAmtIIWFV0VJweNRhkZeoeDpWIQNSYBgSAgWYgQLGwIADs    data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7   http   web archive org web 20150906203819im  http   www javascriptsource com miscellaneous sorting gif          Get the image used in the first row of the current column   var sortColImage   td element getElementsByTagName  img   0         If current image is  asc gif  or  none gif   elements 1 and 2 of sortImages array  then this will      be a descending sort else it will be ascending - get new sort image icon and set sort order flag   var sortAscending   false    var newSortColImage         if  sortColImage getAttribute  src   indexOf sortImages 1   gt -1        sortColImage getAttribute  src   indexOf sortImages 2   gt -1        newSortColImage   sortImages 0       sortAscending   false      else       newSortColImage   sortImages 1       sortAscending   true            Assign  SORTING  image icon  element 3 of sortImages array   to current column title       will replace with newSortColImage when sort completes    sortColImage setAttribute  src  sortImages 3          Find which column was clicked by getting it s column position   var indexCol   td element cellIndex        Get the table element from the td element that was passed as a parameter to this function   var table element   td element parentNode    while  table element nodeName     TABLE         table element   table element parentNode            Get all  tr  elements from the table and assign then to the Array  tr elements    var tr elements   table element getElementsByTagName  tr          Get all the images used in the first row then set them to  none gif        element 2 or sortImages array  except for the current column  all ready been changed    var allImg   tr elements 0  getElementsByTagName  img        for var i 0 i lt allImg length i         if allImg i   sortColImage  allImg i  setAttribute  src  sortImages 2              Some explantion of the basic concept of the following code before we      actually start   Essentially we are going to copy the current columns information      into an array to be sorted  We ll sort the column array then go back and use the information      we saved about the original row positions to re-order the entire table       We are never really sorting more than a columns worth of data  which should keep the sorting fast        Create a new array for holding row information   var clonedRows   new Array         Create a new array to store just the selected column values  not the whole row   var originalCol   new Array          Now loop through all the data row elements      NOTE  Starting at row 1 because row 0 contains the column titles   for  var i 1  i lt tr elements length - ignoreLastLines  i              Clone  the tr element i e  save a copy all of its attributes and values    clonedRows i  tr elements i  cloneNode true          Text value of the selected column on this row    var valueCol   getTextValue tr elements i  cells indexCol           Format text value for sorting depending on its type  ie Date  Currency  number  etc      valueCol   FormatForType valueCol          Assign the column value AND the row number it was originally on in the table    originalCol i   valueCol tr elements i  rowIndex             Get rid of element  0  from this array   A value was never assigned to it because the first row      in the table just contained the column titles  which we did not bother to assign    originalCol shift          Sort the column array returning the value of a sort into a new array   sortCol   originalCol sort sortCompare         If it was supposed to be an Ascending sort then reverse the order   if  sortAscending    sortCol reverse            Now take the values from the sorted column array and use that information to re-arrange      the order of the tr elements in the table   for  var i 1  i  lt  tr elements length - ignoreLastLines  i           var old row   sortCol i-1  1       var new row   i      tr elements i  parentNode replaceChild clonedRows old row  tr elements new row               Format the table  making the rows alternating colors and highlight the sorted column    makePretty table element indexCol ignoreLastLines         Assign correct sort image icon to current column title   sortColImage setAttribute  src  newSortColImage         Function used by the sort routine to compare the current value in the array with the next one function sortCompare  currValue  nextValue        Since the elements of this array are actually arrays themselves  just sort     on the first element which contiains the value  not the second which contains     the original row position   if   currValue 0     nextValue 0    return 0    if   currValue 0   lt  nextValue 0    return -1    if   currValue 0   gt  nextValue 0    return 1       -----------------------------------------------------------------------------    Functions to get and compare values during a sort    -----------------------------------------------------------------------------     This code is necessary for browsers that don t reflect the DOM constants     like IE   if  document ELEMENT NODE    null       document ELEMENT NODE   1     document TEXT NODE   3     function getTextValue el      var i    var s       Find and concatenate the values of all text nodes contained within the      element    s         for  i   0  i  lt  el childNodes length  i        if  el childNodes i  nodeType    document TEXT NODE        s    el childNodes i  nodeValue      else if  el childNodes i  nodeType    document ELEMENT NODE  amp  amp               el childNodes i  tagName     BR         s             else          Use recursion to get text within sub-elements        s    getTextValue el childNodes i       return normalizeString s         Regular expressions for normalizing white space  var whtSpEnds   new RegExp     s    s      g    var whtSpMult   new RegExp    s  s     g     function normalizeString s      s   s replace whtSpMult            Collapse any multiple whites space    s   s replace whtSpEnds            Remove leading or trailing white space    return s        Function used to modify values to make then sortable depending on the type of information function FormatForType itm      var sortValue   itm toLowerCase          If the item matches a date pattern  MM DD YYYY or MM DD YY or M DD YYYY    if  itm match    d d   -  d d   -  d d d d             itm match    d d   -  d d   -  d d             itm match    d   -  d d   -  d d d d                Convert date to YYYYMMDD format for sort comparison purposes        y2k notes  two digit years less than 50 are treated as 20XX  greater than 50 are treated as 19XX     var yr   -1       if  itm length    10          sortValue   itm substr 6 4  itm substr 0 2  itm substr 3 2          else if  itm length    9          sortValue   itm substr 5 4   0    itm substr 0 1  itm substr 2 2         else         yr   itm substr 6 2         if  parseInt yr   lt  50            yr    20  yr          else           yr    19  yr                  sortValue   yr itm substr 3 2  itm substr 0 2                      If the item matches a Percent patten  contains a percent sign    if  itm match               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         sortValue   parseFloat sortValue             If item starts with a     and ends with a     then remove them and put a negative sign in front   if  itm substr 0 1          amp  itm substr itm length - 1 1               itm    -    itm substr 1 itm length - 2           If the item matches a currency pattern  starts with a dollar or negative dollar sign    if  itm match           -             Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue                If the item matches a numeric pattern   if  itm match    d   d      -  d d    d      -  d d      -    d d               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g           sortValue   sortValue replace    g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue               return sortValue       -----------------------------------------------------------------------------    Functions to update the table appearance after a sort    -----------------------------------------------------------------------------     Style class names  var rowClsNm    alternateRow   var colClsNm    sortedColumn       Regular expressions for setting class names  var rowTest   new RegExp rowClsNm   gi    var colTest   new RegExp colClsNm   gi     function makePretty tblEl  col  ignoreLastLines       var i  j    var rowEl  cellEl        Set style classes on each row to alternate their appearance    for  i   1  i  lt  tblEl rows length - ignoreLastLines  i         rowEl   tblEl rows i      rowEl className   rowEl className replace rowTest           if  i   2    0        rowEl className          rowClsNm      rowEl className   normalizeString rowEl className          Set style classes on each column  other than the name column  to        highlight the one that was sorted      for  j   0  j  lt  tblEl rows i  cells length  j            cellEl   rowEl cells j         cellEl className   cellEl className replace colTest             if  j    col          cellEl className          colClsNm        cellEl className   normalizeString cellEl className                     END Generic Table sort                                                            Function to scroll to top before sorting to fix an IE bug    Which repositions the header off the top of the screen    if you try to sort while scrolled to bottom  function GoTop      document getElementById  TableContainer   scrollTop   0          gt    lt  script gt   lt  head gt   lt body gt     lt table cellpadding  0  cellspacing  0  border  0  gt   lt tr gt  lt td gt   lt div id  TableContainer  class  TableContainer  style  height 230px   gt   lt table class  scrollTable  gt    lt thead class  fixedHeader headerFormat  gt     lt tr gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  gt  lt b gt NAME lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Amt lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Lvl lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Rank lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Position lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Date lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt     lt  tr gt    lt  thead gt    lt tbody class  scrollContent bodyFormat  style  height 200px   gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 23423  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 32  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 1  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 59  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 534 23  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 42  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 2  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt  -10 42   lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt - 19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt  -10 01   lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt -10 20  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  total  gt       lt td gt  lt strong gt TOTAL lt  strong gt   lt  td gt       lt td align  right  gt  lt strong gt 999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 9999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 99 lt  strong gt  lt  td gt       lt td  gt   lt  td gt       lt td align  right  gt   lt  td gt      lt  tr gt    lt  tbody gt   lt  table gt   lt  div gt   lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

There are quite a few cross browser solutions for this today  among which are SuperTable which I like due to its elegance and simplicity  now being continued with MooGrid  and SlickGrid with its awesome set of features

User · Answer

You can do it  without javascript  see this link  http   yonax73 blogspot com 2014 09 tabla-con-cabecera-estatica-cuerpo-con html  or live demo  http   jsfiddle net yonatanalexis22 aeeme8mt 7   table  border-spacing  0  display  flex   Se ajuste dinamicamente al tamano del dispositivo    max-height  40vh    El alto que necesitemos    overflow-y  auto     El scroll verticalmente cuando sea necesario   overflow-x  hidden   Sin scroll horizontal   table-layout  fixed    Forzamos a que las filas tenga el mismo ancho    width  98vw    El ancho que necesitemos   border 1px solid gray

User · Answer

I ve posted my jQuery plugin solution here  Frozen table header inside scrollable div  It does exactly what you want and is really lightweight and easy to use

User · Answer

You need two tables  where the first one is an exact overlay over the second one  The second one contains all the data  where the first one just contains the first column  You have to synchronize it s width and depending on the content also the height of it s rows    Additional to this two tables  you need a third one  That s the first row  which lays exactly between the other two and has to be synchronized in the same way   You will need absolute positioning here  Next  you would synchronize the scrolling of the data table with the scrolling positions of the head row and first column table   That works very well in all major browsers  except for one issue  The synchronized scrolling will flutter  To fix that  you need two outher div containers that hold a clone of the content of the header row and the first column  When scrolling vertically  you display the header row clone to prevent fluttering  while you reposition the original in the background  When scrolling horizontally  you would show the first row clone  Same thing here

User · Answer

How about a solution where you put the actual "data" of the table inside its own div, with overflow: scroll;? Then the browser will automatically create scrollbars for the portion of the "table" you do not want to lock, and you can put the "table header"/first row just above that <div>.

Not sure how that would work with scrolling horizontally though.

User · Answer

It s actually do-able without JavaScript  but using pure CSS   HTML with sticky position  Just add  quot position sticky quot  to the cells you d like to freeze  For building a table  you can either use  or CSS grid  and this technique works on both of them  Here is an example formatting with table tag   live demo here     lt table gt     lt tr gt  lt th class  quot head quot  gt  lt  th class  quot head quot  gt  lt th gt  lt  th gt       lt  tr gt     lt tr gt  lt th class  quot head quot  gt  lt  th gt               lt th gt  lt  th gt       lt  tr gt       lt  table gt   lt style type  quot text css quot  gt     head   position  sticky  top  0  left  0    lt  style gt   And here is an example with CSS Grid   live demo here     lt div class  quot grid quot  gt      lt  -- cells to freeze -- gt      lt div class  quot entry head quot  gt  lt  div gt      lt div class  quot entry head quot  gt  lt  div gt             lt  -- normal cells -- gt      lt div class  quot entry quot  gt  lt  div gt          lt  div gt   lt style type  quot text css quot  gt     grid       display  grid      grid-template-columns  repeat  lt your-cell-count gt    lt cell-size gt             entry head   position  sticky  top  0  left  0    lt  style gt   You probably will need to take care of the cells frozen both horizontally and vertically   e g    setting a z-index larger than others   but it will be still CSS thing  I think the main drawback of this approach is  probably  the browser compatibility issue  Check Can I Use CSS-sticky and Can I use CSS grid before using these techniques

User · Answer

Here is one that I made that is pure javascript/css only.

https://jsfiddle.net/KirbyLWallace/x5sbe0dk/5/

It's meant to be used in full width screen, but I've modified to fit a specific width for the fiddle.

<body onResize="scaleElements()">

<div id="table-container-div">

<table id="data-table">
  <thead id="th-header">
    <tr id="th-header-row">
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
      <td>Column4</td>
    </tr>
  </thead>

  <tbody id="tbl-body">
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
  </tbody>

</table>

javascript:

(() => {
        scaleElements();  
    })();


  function scaleElements() {

        // element() is just shorthand for document.getElementById().

        // scaleElements() scales a number of other things, not included here, 
        // that get rescaled any time the browser, or a container is resized.
        // the table header row here is just one of them...
        //
        // this thing includes checks to see if a table with the table & thead 
        // is on the page.  If it is, it checks to see if the span container is
        // here (it's not on the first run, but it is on subsequent calls.  So, 
        // it adds it if it needs it, or reuses it if it's there.

        if (element("data-table")) {

            if (element("th-span-container")) {
                element("th-span-container").parentElement.removeChild(element("th-span-container"));
            }

            var x = document.createElement("div");
                x.id = "th-span-container";
                x.style.cssFloat = "left";
                x.style.position = "fixed";
                x.style.top = "10px";

                // you will want to fiddle with your own particular positioning. 
                // this one is positioned to work on a table that is below a page 
                // logo banner.

            var tds = element("th-header-row").getElementsByTagName("td");

            for (i = 0; i < tds.length; i++) {

                let z = tds[i];
                let y = document.createElement("span");

                y.style.padding = "0px";
                y.style.margin = "0px";
                y.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
                y.style.fontSize = "13px";
                y.style.border = "0px";
                y.style.position = "absolute";
                y.style.color = "white";
                y.style.backgroundColor = "#3D6588";
                y.style.left = z.offsetLeft + "px";
                y.style.height = z.offsetHeight + "px";
                y.style.lineHeight = z.offsetHeight + "px";
                y.style.width = z.offsetWidth + "px";
                y.innerHTML = z.innerHTML;
                x.appendChild(y);

            }

            element("table-container-div").appendChild(x);
            element("th-header-row").style.visibility = "hidden";

        }

    }

function element(e) {
    return document.getElementById(e);
}

css:

body {
  background: black;
}

#table-container-div {
            width: 310px;
            position: absolute;
            top: 10px;
            bottom: 10px;
            overflow-x: hidden;
            overflow-y: auto;
            min-width: 320px;
        }

        table {
            font-size: 13px;
            height: 120px;
            width: 300px;
            border: 0px solid red;
            background-color: #11171F;
        }

        tr {
            height: 22px;
            color: #cff3ff;
        }

            tr:hover {
                background-color: dimgrey;
            }

        td {
          color:white;
            border-right: 1px dotted #4F4F4F;
        }

        #th-header-row {
            background-color: #3D6588;
            color: white;
        }

User · Answer

How about a solution where you put the actual "data" of the table inside its own div, with overflow: scroll;? Then the browser will automatically create scrollbars for the portion of the "table" you do not want to lock, and you can put the "table header"/first row just above that <div>.

Not sure how that would work with scrolling horizontally though.

User · Answer

Sort and Lock Table is the only solution I have seen which does work on other browsers than IE   although this  locked column css  might do the trick as well    Required code block below    lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt     lt meta name  robots  content  noindex  nofollow  gt     lt meta name  googlebot  content  noindex  nofollow  gt     lt script type  text javascript  src   js lib dummy js  gt  lt  script gt       lt link rel  stylesheet  type  text css  href   css result-light css  gt     lt style type  text css  gt         Scrollable Content Height     scrollContent    height 100px   overflow-x hidden   overflow-y auto     scrollContent tr    height  auto   white-space  nowrap        Prevent Mozilla scrollbar from hiding right-most cell content     scrollContent tr td last-child    padding-right  20px        Fixed Header Height     fixedHeader tr    position  relative   height  auto        Put border around entire table    div TableContainer    border  1px solid  7DA87D        Table Header formatting     headerFormat    background-color  white   color   FFFFFF   margin  3px   padding  1px   white-space  nowrap   font-family  Helvetica   font-size  16px   text-decoration  none   font-weight  bold     headerFormat tr td    border  1px solid  000000   background-color   7DA87D        Table Body  Scrollable Content  formatting     bodyFormat tr td       color   000000      margin  3px      padding  1px      border  0px none      font-family  Helvetica      font-size  12px        Use to set different color for alternating rows     alternateRow     background-color   E0F1E0        Styles used for SORTING     point    cursor pointer    td sortedColumn     background-color   E0F1E0     tr alternateRow td sortedColumn     background-color   c5e5c5     total       background-color   FED362      color   000000      white-space  nowrap      font-size  12px      text-decoration  none       lt  style gt      lt title gt  lt  title gt   lt script type  text javascript  gt    lt   CDATA      This script and many more are available free online at The JavaScript Source    http   www javascriptsource com Created by  Stan Slaughter    http   www stansight com                                                                Generic Table Sort  Basic Concept  A table can be sorted by clicking on the title of any column in the table  toggling between ascending and descending sorts    Assumptions     The first row of the table contains column titles that are  clicked    to sort the table    The images  desc gif   asc gif   none gif   sorting gif  exist    The img tag is in each column of the the title row to represent the   sort graphic     The CSS classes  alternateRow  and  sortedColumn  exist so we can   have alternating colors for each row and a highlight the sorted   column   Something like the  lt style gt  definition below  but with the   background colors set to whatever you want       lt style gt     tr alternateRow        background-color   E0F1E0           td sortedColumn        background-color   E0F1E0           tr alternateRow td sortedColumn        background-color   c5e5c5           lt  style gt                                                              function sortTable td element ignoreLastLines          If the optional ignoreLastLines parameter  number of lines  not  to sort at end of table       was not passed then make it 0   ignoreLastLines    typeof ignoreLastLines    undefined     0   ignoreLastLines     var sortImages    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUz4IVcZDleixQIQjA1pFFZx2FVRklZvOWUl8LsVgBeFLyE8TLgDZYESISwvAAA1QvjAQwBADs    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUw4CVeDzOeFwCgIhFBBDtY1sAmtIIWFV0VJweNRhkZeoeDpWIQNSYBgSAgWYgQLGwIADs    data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7   http   web archive org web 20150906203819im  http   www javascriptsource com miscellaneous sorting gif          Get the image used in the first row of the current column   var sortColImage   td element getElementsByTagName  img   0         If current image is  asc gif  or  none gif   elements 1 and 2 of sortImages array  then this will      be a descending sort else it will be ascending - get new sort image icon and set sort order flag   var sortAscending   false    var newSortColImage         if  sortColImage getAttribute  src   indexOf sortImages 1   gt -1        sortColImage getAttribute  src   indexOf sortImages 2   gt -1        newSortColImage   sortImages 0       sortAscending   false      else       newSortColImage   sortImages 1       sortAscending   true            Assign  SORTING  image icon  element 3 of sortImages array   to current column title       will replace with newSortColImage when sort completes    sortColImage setAttribute  src  sortImages 3          Find which column was clicked by getting it s column position   var indexCol   td element cellIndex        Get the table element from the td element that was passed as a parameter to this function   var table element   td element parentNode    while  table element nodeName     TABLE         table element   table element parentNode            Get all  tr  elements from the table and assign then to the Array  tr elements    var tr elements   table element getElementsByTagName  tr          Get all the images used in the first row then set them to  none gif        element 2 or sortImages array  except for the current column  all ready been changed    var allImg   tr elements 0  getElementsByTagName  img        for var i 0 i lt allImg length i         if allImg i   sortColImage  allImg i  setAttribute  src  sortImages 2              Some explantion of the basic concept of the following code before we      actually start   Essentially we are going to copy the current columns information      into an array to be sorted  We ll sort the column array then go back and use the information      we saved about the original row positions to re-order the entire table       We are never really sorting more than a columns worth of data  which should keep the sorting fast        Create a new array for holding row information   var clonedRows   new Array         Create a new array to store just the selected column values  not the whole row   var originalCol   new Array          Now loop through all the data row elements      NOTE  Starting at row 1 because row 0 contains the column titles   for  var i 1  i lt tr elements length - ignoreLastLines  i              Clone  the tr element i e  save a copy all of its attributes and values    clonedRows i  tr elements i  cloneNode true          Text value of the selected column on this row    var valueCol   getTextValue tr elements i  cells indexCol           Format text value for sorting depending on its type  ie Date  Currency  number  etc      valueCol   FormatForType valueCol          Assign the column value AND the row number it was originally on in the table    originalCol i   valueCol tr elements i  rowIndex             Get rid of element  0  from this array   A value was never assigned to it because the first row      in the table just contained the column titles  which we did not bother to assign    originalCol shift          Sort the column array returning the value of a sort into a new array   sortCol   originalCol sort sortCompare         If it was supposed to be an Ascending sort then reverse the order   if  sortAscending    sortCol reverse            Now take the values from the sorted column array and use that information to re-arrange      the order of the tr elements in the table   for  var i 1  i  lt  tr elements length - ignoreLastLines  i           var old row   sortCol i-1  1       var new row   i      tr elements i  parentNode replaceChild clonedRows old row  tr elements new row               Format the table  making the rows alternating colors and highlight the sorted column    makePretty table element indexCol ignoreLastLines         Assign correct sort image icon to current column title   sortColImage setAttribute  src  newSortColImage         Function used by the sort routine to compare the current value in the array with the next one function sortCompare  currValue  nextValue        Since the elements of this array are actually arrays themselves  just sort     on the first element which contiains the value  not the second which contains     the original row position   if   currValue 0     nextValue 0    return 0    if   currValue 0   lt  nextValue 0    return -1    if   currValue 0   gt  nextValue 0    return 1       -----------------------------------------------------------------------------    Functions to get and compare values during a sort    -----------------------------------------------------------------------------     This code is necessary for browsers that don t reflect the DOM constants     like IE   if  document ELEMENT NODE    null       document ELEMENT NODE   1     document TEXT NODE   3     function getTextValue el      var i    var s       Find and concatenate the values of all text nodes contained within the      element    s         for  i   0  i  lt  el childNodes length  i        if  el childNodes i  nodeType    document TEXT NODE        s    el childNodes i  nodeValue      else if  el childNodes i  nodeType    document ELEMENT NODE  amp  amp               el childNodes i  tagName     BR         s             else          Use recursion to get text within sub-elements        s    getTextValue el childNodes i       return normalizeString s         Regular expressions for normalizing white space  var whtSpEnds   new RegExp     s    s      g    var whtSpMult   new RegExp    s  s     g     function normalizeString s      s   s replace whtSpMult            Collapse any multiple whites space    s   s replace whtSpEnds            Remove leading or trailing white space    return s        Function used to modify values to make then sortable depending on the type of information function FormatForType itm      var sortValue   itm toLowerCase          If the item matches a date pattern  MM DD YYYY or MM DD YY or M DD YYYY    if  itm match    d d   -  d d   -  d d d d             itm match    d d   -  d d   -  d d             itm match    d   -  d d   -  d d d d                Convert date to YYYYMMDD format for sort comparison purposes        y2k notes  two digit years less than 50 are treated as 20XX  greater than 50 are treated as 19XX     var yr   -1       if  itm length    10          sortValue   itm substr 6 4  itm substr 0 2  itm substr 3 2          else if  itm length    9          sortValue   itm substr 5 4   0    itm substr 0 1  itm substr 2 2         else         yr   itm substr 6 2         if  parseInt yr   lt  50            yr    20  yr          else           yr    19  yr                  sortValue   yr itm substr 3 2  itm substr 0 2                      If the item matches a Percent patten  contains a percent sign    if  itm match               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         sortValue   parseFloat sortValue             If item starts with a     and ends with a     then remove them and put a negative sign in front   if  itm substr 0 1          amp  itm substr itm length - 1 1               itm    -    itm substr 1 itm length - 2           If the item matches a currency pattern  starts with a dollar or negative dollar sign    if  itm match           -             Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue                If the item matches a numeric pattern   if  itm match    d   d      -  d d    d      -  d d      -    d d               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g           sortValue   sortValue replace    g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue               return sortValue       -----------------------------------------------------------------------------    Functions to update the table appearance after a sort    -----------------------------------------------------------------------------     Style class names  var rowClsNm    alternateRow   var colClsNm    sortedColumn       Regular expressions for setting class names  var rowTest   new RegExp rowClsNm   gi    var colTest   new RegExp colClsNm   gi     function makePretty tblEl  col  ignoreLastLines       var i  j    var rowEl  cellEl        Set style classes on each row to alternate their appearance    for  i   1  i  lt  tblEl rows length - ignoreLastLines  i         rowEl   tblEl rows i      rowEl className   rowEl className replace rowTest           if  i   2    0        rowEl className          rowClsNm      rowEl className   normalizeString rowEl className          Set style classes on each column  other than the name column  to        highlight the one that was sorted      for  j   0  j  lt  tblEl rows i  cells length  j            cellEl   rowEl cells j         cellEl className   cellEl className replace colTest             if  j    col          cellEl className          colClsNm        cellEl className   normalizeString cellEl className                     END Generic Table sort                                                            Function to scroll to top before sorting to fix an IE bug    Which repositions the header off the top of the screen    if you try to sort while scrolled to bottom  function GoTop      document getElementById  TableContainer   scrollTop   0          gt    lt  script gt   lt  head gt   lt body gt     lt table cellpadding  0  cellspacing  0  border  0  gt   lt tr gt  lt td gt   lt div id  TableContainer  class  TableContainer  style  height 230px   gt   lt table class  scrollTable  gt    lt thead class  fixedHeader headerFormat  gt     lt tr gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  gt  lt b gt NAME lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Amt lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Lvl lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Rank lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Position lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Date lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt     lt  tr gt    lt  thead gt    lt tbody class  scrollContent bodyFormat  style  height 200px   gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 23423  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 32  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 1  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 59  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 534 23  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 42  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 2  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt  -10 42   lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt - 19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt  -10 01   lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt -10 20  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  total  gt       lt td gt  lt strong gt TOTAL lt  strong gt   lt  td gt       lt td align  right  gt  lt strong gt 999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 9999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 99 lt  strong gt  lt  td gt       lt td  gt   lt  td gt       lt td align  right  gt   lt  td gt      lt  tr gt    lt  tbody gt   lt  table gt   lt  div gt   lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

You d have to test it but if you embedded an iframe within your page then used CSS to absolutely position the 1st row  amp  column at 0 0 in the iframe page would that solve your problem

User · Answer

I ran across a site a few weeks back  This is a working example of the first column locked but it is not browser compatible with Firefox  I didn t do a lot of checking around but it seems it only works in IE  There are some notes the author provided along with it that you can read   Lock the First column  http   home tampabay rr com bmerkey examples locked-column-csv html  Let me know if you need the Javascript to lock the Table headers too

User · Answer

I did this with a combination of     Using multiple tables Fixed-size cells jQuery s scrollTop and scrollLeft functions   Here s a jsfiddle example to demonstrate    Haven t tested on all browsers but I imagine it s not great on older IE versions    x000D   x000D      clscroll-content   scroll function     x000D          clscroll-row-headers   scrollTop     clscroll-content   scrollTop     x000D          clscroll-column-headers   scrollLeft     clscroll-content   scrollLeft     x000D      x000D   x000D      clscroll-column-headers   scroll function     x000D          clscroll-content   scrollLeft     clscroll-column-headers   scrollLeft     x000D      x000D   x000D      clscroll-row-headers   scroll function     x000D          clscroll-content   scrollTop     clscroll-row-headers   scrollTop     x000D      x000D   clscroll table   x000D      table-layout  fixed  x000D    x000D   x000D   clscroll td   clscroll th    x000D      overflow  hidden  x000D    x000D   x000D   corner-header   x000D      float  left  x000D    x000D   x000D   column-headers   x000D      float  left  x000D      overflow  scroll  x000D    x000D   x000D   row-headers   x000D      clear  both  x000D      float  left      x000D      overflow  scroll  x000D    x000D   x000D   table-content   x000D      table-layout  fixed  x000D      float  left  x000D      overflow  scroll  x000D    x000D   x000D   clscroll td   clscroll th    x000D      width  200px  x000D      border  1px solid black  x000D    x000D   x000D   row-headers   table-content   x000D      height  100px  x000D    x000D   x000D   column-headers   table-content   table-content table   column-headers table   x000D      width  400px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  clscroll corner-header  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt  amp nbsp  lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll column-headers  id  clscroll-column-headers  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt Bus lt  th gt  x000D             lt th gt Plane lt  th gt  x000D             lt th gt Boat lt  th gt  x000D             lt th gt Bicycle lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll row-headers  id  clscroll-row-headers  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt Red lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Green lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Blue lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Orange lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Purple lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Yellow lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Pink lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Brown lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll table-content  id  clscroll-content  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt td gt Red Bus lt  td gt  x000D             lt td gt Red Plane lt  td gt  x000D             lt td gt Red Boat lt  td gt  x000D             lt td gt Red Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Green Bus lt  td gt  x000D             lt td gt Green Plane lt  td gt  x000D             lt td gt Green Boat lt  td gt  x000D             lt td gt Green Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Blue Bus lt  td gt  x000D             lt td gt Blue Plane lt  td gt  x000D             lt td gt Blue Boat lt  td gt  x000D             lt td gt Blue Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Orange Bus lt  td gt  x000D             lt td gt Orange Plane lt  td gt  x000D             lt td gt Orange Boat lt  td gt  x000D             lt td gt Orange Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Purple Bus lt  td gt  x000D             lt td gt Purple Plane lt  td gt  x000D             lt td gt Purple Boat lt  td gt  x000D             lt td gt Purple Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Yellow Bus lt  td gt  x000D             lt td gt Yellow Plane lt  td gt  x000D             lt td gt Yellow Boat lt  td gt  x000D             lt td gt Yellow Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Pink Bus lt  td gt  x000D             lt td gt Pink Plane lt  td gt  x000D             lt td gt Pink Boat lt  td gt  x000D             lt td gt Pink Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Brown Bus lt  td gt  x000D             lt td gt Brown Plane lt  td gt  x000D             lt td gt Brown Boat lt  td gt  x000D             lt td gt Brown Bicycle lt  td gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Oh well  I looked up for scrollable table with fixed column to understand the need of this specific requirement and your question was one of it with no close answers     I answered this question Large dynamically sized html table with a fixed scroll row and fixed scroll column which inspired to showcase my work as a plugin https   github com meetselva fixed-table-rows-cols  The plugin basically converts a well formatted HTML table to a scrollable table with fixed table header and columns   The usage is as below       myTable   fxdHdrCol       fixedCols      3           3 fixed columns        width           100        set the width of the container  fixed or percentage        height         500         set the height of the container          You can check the demo and documentation here

User · Answer

Here is one that I made that is pure javascript/css only.

https://jsfiddle.net/KirbyLWallace/x5sbe0dk/5/

It's meant to be used in full width screen, but I've modified to fit a specific width for the fiddle.

<body onResize="scaleElements()">

<div id="table-container-div">

<table id="data-table">
  <thead id="th-header">
    <tr id="th-header-row">
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
      <td>Column4</td>
    </tr>
  </thead>

  <tbody id="tbl-body">
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
    <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>h</td><td>i</td><td>j</td><td>k</td></tr>
  </tbody>

</table>

javascript:

(() => {
        scaleElements();  
    })();


  function scaleElements() {

        // element() is just shorthand for document.getElementById().

        // scaleElements() scales a number of other things, not included here, 
        // that get rescaled any time the browser, or a container is resized.
        // the table header row here is just one of them...
        //
        // this thing includes checks to see if a table with the table & thead 
        // is on the page.  If it is, it checks to see if the span container is
        // here (it's not on the first run, but it is on subsequent calls.  So, 
        // it adds it if it needs it, or reuses it if it's there.

        if (element("data-table")) {

            if (element("th-span-container")) {
                element("th-span-container").parentElement.removeChild(element("th-span-container"));
            }

            var x = document.createElement("div");
                x.id = "th-span-container";
                x.style.cssFloat = "left";
                x.style.position = "fixed";
                x.style.top = "10px";

                // you will want to fiddle with your own particular positioning. 
                // this one is positioned to work on a table that is below a page 
                // logo banner.

            var tds = element("th-header-row").getElementsByTagName("td");

            for (i = 0; i < tds.length; i++) {

                let z = tds[i];
                let y = document.createElement("span");

                y.style.padding = "0px";
                y.style.margin = "0px";
                y.style.fontFamily = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
                y.style.fontSize = "13px";
                y.style.border = "0px";
                y.style.position = "absolute";
                y.style.color = "white";
                y.style.backgroundColor = "#3D6588";
                y.style.left = z.offsetLeft + "px";
                y.style.height = z.offsetHeight + "px";
                y.style.lineHeight = z.offsetHeight + "px";
                y.style.width = z.offsetWidth + "px";
                y.innerHTML = z.innerHTML;
                x.appendChild(y);

            }

            element("table-container-div").appendChild(x);
            element("th-header-row").style.visibility = "hidden";

        }

    }

function element(e) {
    return document.getElementById(e);
}

css:

body {
  background: black;
}

#table-container-div {
            width: 310px;
            position: absolute;
            top: 10px;
            bottom: 10px;
            overflow-x: hidden;
            overflow-y: auto;
            min-width: 320px;
        }

        table {
            font-size: 13px;
            height: 120px;
            width: 300px;
            border: 0px solid red;
            background-color: #11171F;
        }

        tr {
            height: 22px;
            color: #cff3ff;
        }

            tr:hover {
                background-color: dimgrey;
            }

        td {
          color:white;
            border-right: 1px dotted #4F4F4F;
        }

        #th-header-row {
            background-color: #3D6588;
            color: white;
        }

User · Answer

Sort and Lock Table is the only solution I have seen which does work on other browsers than IE   although this  locked column css  might do the trick as well    Required code block below    lt  DOCTYPE html gt   lt html gt   lt head gt     lt meta http-equiv  content-type  content  text html  charset UTF-8  gt     lt meta name  robots  content  noindex  nofollow  gt     lt meta name  googlebot  content  noindex  nofollow  gt     lt script type  text javascript  src   js lib dummy js  gt  lt  script gt       lt link rel  stylesheet  type  text css  href   css result-light css  gt     lt style type  text css  gt         Scrollable Content Height     scrollContent    height 100px   overflow-x hidden   overflow-y auto     scrollContent tr    height  auto   white-space  nowrap        Prevent Mozilla scrollbar from hiding right-most cell content     scrollContent tr td last-child    padding-right  20px        Fixed Header Height     fixedHeader tr    position  relative   height  auto        Put border around entire table    div TableContainer    border  1px solid  7DA87D        Table Header formatting     headerFormat    background-color  white   color   FFFFFF   margin  3px   padding  1px   white-space  nowrap   font-family  Helvetica   font-size  16px   text-decoration  none   font-weight  bold     headerFormat tr td    border  1px solid  000000   background-color   7DA87D        Table Body  Scrollable Content  formatting     bodyFormat tr td       color   000000      margin  3px      padding  1px      border  0px none      font-family  Helvetica      font-size  12px        Use to set different color for alternating rows     alternateRow     background-color   E0F1E0        Styles used for SORTING     point    cursor pointer    td sortedColumn     background-color   E0F1E0     tr alternateRow td sortedColumn     background-color   c5e5c5     total       background-color   FED362      color   000000      white-space  nowrap      font-size  12px      text-decoration  none       lt  style gt      lt title gt  lt  title gt   lt script type  text javascript  gt    lt   CDATA      This script and many more are available free online at The JavaScript Source    http   www javascriptsource com Created by  Stan Slaughter    http   www stansight com                                                                Generic Table Sort  Basic Concept  A table can be sorted by clicking on the title of any column in the table  toggling between ascending and descending sorts    Assumptions     The first row of the table contains column titles that are  clicked    to sort the table    The images  desc gif   asc gif   none gif   sorting gif  exist    The img tag is in each column of the the title row to represent the   sort graphic     The CSS classes  alternateRow  and  sortedColumn  exist so we can   have alternating colors for each row and a highlight the sorted   column   Something like the  lt style gt  definition below  but with the   background colors set to whatever you want       lt style gt     tr alternateRow        background-color   E0F1E0           td sortedColumn        background-color   E0F1E0           tr alternateRow td sortedColumn        background-color   c5e5c5           lt  style gt                                                              function sortTable td element ignoreLastLines          If the optional ignoreLastLines parameter  number of lines  not  to sort at end of table       was not passed then make it 0   ignoreLastLines    typeof ignoreLastLines    undefined     0   ignoreLastLines     var sortImages    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUz4IVcZDleixQIQjA1pFFZx2FVRklZvOWUl8LsVgBeFLyE8TLgDZYESISwvAAA1QvjAQwBADs    data image gif base64 R0lGODlhCgAKAMQXAJOkk3mReXume3uTe3mieXGPcXOYc Hx8Xadds Wz9vg24ejh3GUcYOgg6a0pnGVcfP18 3w7c3TzdPY06u4q r8 v       wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABcALAAAAAAKAAoAAAUw4CVeDzOeFwCgIhFBBDtY1sAmtIIWFV0VJweNRhkZeoeDpWIQNSYBgSAgWYgQLGwIADs    data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7   http   web archive org web 20150906203819im  http   www javascriptsource com miscellaneous sorting gif          Get the image used in the first row of the current column   var sortColImage   td element getElementsByTagName  img   0         If current image is  asc gif  or  none gif   elements 1 and 2 of sortImages array  then this will      be a descending sort else it will be ascending - get new sort image icon and set sort order flag   var sortAscending   false    var newSortColImage         if  sortColImage getAttribute  src   indexOf sortImages 1   gt -1        sortColImage getAttribute  src   indexOf sortImages 2   gt -1        newSortColImage   sortImages 0       sortAscending   false      else       newSortColImage   sortImages 1       sortAscending   true            Assign  SORTING  image icon  element 3 of sortImages array   to current column title       will replace with newSortColImage when sort completes    sortColImage setAttribute  src  sortImages 3          Find which column was clicked by getting it s column position   var indexCol   td element cellIndex        Get the table element from the td element that was passed as a parameter to this function   var table element   td element parentNode    while  table element nodeName     TABLE         table element   table element parentNode            Get all  tr  elements from the table and assign then to the Array  tr elements    var tr elements   table element getElementsByTagName  tr          Get all the images used in the first row then set them to  none gif        element 2 or sortImages array  except for the current column  all ready been changed    var allImg   tr elements 0  getElementsByTagName  img        for var i 0 i lt allImg length i         if allImg i   sortColImage  allImg i  setAttribute  src  sortImages 2              Some explantion of the basic concept of the following code before we      actually start   Essentially we are going to copy the current columns information      into an array to be sorted  We ll sort the column array then go back and use the information      we saved about the original row positions to re-order the entire table       We are never really sorting more than a columns worth of data  which should keep the sorting fast        Create a new array for holding row information   var clonedRows   new Array         Create a new array to store just the selected column values  not the whole row   var originalCol   new Array          Now loop through all the data row elements      NOTE  Starting at row 1 because row 0 contains the column titles   for  var i 1  i lt tr elements length - ignoreLastLines  i              Clone  the tr element i e  save a copy all of its attributes and values    clonedRows i  tr elements i  cloneNode true          Text value of the selected column on this row    var valueCol   getTextValue tr elements i  cells indexCol           Format text value for sorting depending on its type  ie Date  Currency  number  etc      valueCol   FormatForType valueCol          Assign the column value AND the row number it was originally on in the table    originalCol i   valueCol tr elements i  rowIndex             Get rid of element  0  from this array   A value was never assigned to it because the first row      in the table just contained the column titles  which we did not bother to assign    originalCol shift          Sort the column array returning the value of a sort into a new array   sortCol   originalCol sort sortCompare         If it was supposed to be an Ascending sort then reverse the order   if  sortAscending    sortCol reverse            Now take the values from the sorted column array and use that information to re-arrange      the order of the tr elements in the table   for  var i 1  i  lt  tr elements length - ignoreLastLines  i           var old row   sortCol i-1  1       var new row   i      tr elements i  parentNode replaceChild clonedRows old row  tr elements new row               Format the table  making the rows alternating colors and highlight the sorted column    makePretty table element indexCol ignoreLastLines         Assign correct sort image icon to current column title   sortColImage setAttribute  src  newSortColImage         Function used by the sort routine to compare the current value in the array with the next one function sortCompare  currValue  nextValue        Since the elements of this array are actually arrays themselves  just sort     on the first element which contiains the value  not the second which contains     the original row position   if   currValue 0     nextValue 0    return 0    if   currValue 0   lt  nextValue 0    return -1    if   currValue 0   gt  nextValue 0    return 1       -----------------------------------------------------------------------------    Functions to get and compare values during a sort    -----------------------------------------------------------------------------     This code is necessary for browsers that don t reflect the DOM constants     like IE   if  document ELEMENT NODE    null       document ELEMENT NODE   1     document TEXT NODE   3     function getTextValue el      var i    var s       Find and concatenate the values of all text nodes contained within the      element    s         for  i   0  i  lt  el childNodes length  i        if  el childNodes i  nodeType    document TEXT NODE        s    el childNodes i  nodeValue      else if  el childNodes i  nodeType    document ELEMENT NODE  amp  amp               el childNodes i  tagName     BR         s             else          Use recursion to get text within sub-elements        s    getTextValue el childNodes i       return normalizeString s         Regular expressions for normalizing white space  var whtSpEnds   new RegExp     s    s      g    var whtSpMult   new RegExp    s  s     g     function normalizeString s      s   s replace whtSpMult            Collapse any multiple whites space    s   s replace whtSpEnds            Remove leading or trailing white space    return s        Function used to modify values to make then sortable depending on the type of information function FormatForType itm      var sortValue   itm toLowerCase          If the item matches a date pattern  MM DD YYYY or MM DD YY or M DD YYYY    if  itm match    d d   -  d d   -  d d d d             itm match    d d   -  d d   -  d d             itm match    d   -  d d   -  d d d d                Convert date to YYYYMMDD format for sort comparison purposes        y2k notes  two digit years less than 50 are treated as 20XX  greater than 50 are treated as 19XX     var yr   -1       if  itm length    10          sortValue   itm substr 6 4  itm substr 0 2  itm substr 3 2          else if  itm length    9          sortValue   itm substr 5 4   0    itm substr 0 1  itm substr 2 2         else         yr   itm substr 6 2         if  parseInt yr   lt  50            yr    20  yr          else           yr    19  yr                  sortValue   yr itm substr 3 2  itm substr 0 2                      If the item matches a Percent patten  contains a percent sign    if  itm match               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         sortValue   parseFloat sortValue             If item starts with a     and ends with a     then remove them and put a negative sign in front   if  itm substr 0 1          amp  itm substr itm length - 1 1               itm    -    itm substr 1 itm length - 2           If the item matches a currency pattern  starts with a dollar or negative dollar sign    if  itm match           -             Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue                If the item matches a numeric pattern   if  itm match    d   d      -  d d    d      -  d d      -    d d               Replace anything that is not part of a number  decimal pt  neg sign  or 0 through 9  with an empty string     sortValue   itm replace    0-9 -  g           sortValue   sortValue replace    g         if  isNaN sortValue          sortValue   0       else        sortValue   parseFloat sortValue               return sortValue       -----------------------------------------------------------------------------    Functions to update the table appearance after a sort    -----------------------------------------------------------------------------     Style class names  var rowClsNm    alternateRow   var colClsNm    sortedColumn       Regular expressions for setting class names  var rowTest   new RegExp rowClsNm   gi    var colTest   new RegExp colClsNm   gi     function makePretty tblEl  col  ignoreLastLines       var i  j    var rowEl  cellEl        Set style classes on each row to alternate their appearance    for  i   1  i  lt  tblEl rows length - ignoreLastLines  i         rowEl   tblEl rows i      rowEl className   rowEl className replace rowTest           if  i   2    0        rowEl className          rowClsNm      rowEl className   normalizeString rowEl className          Set style classes on each column  other than the name column  to        highlight the one that was sorted      for  j   0  j  lt  tblEl rows i  cells length  j            cellEl   rowEl cells j         cellEl className   cellEl className replace colTest             if  j    col          cellEl className          colClsNm        cellEl className   normalizeString cellEl className                     END Generic Table sort                                                            Function to scroll to top before sorting to fix an IE bug    Which repositions the header off the top of the screen    if you try to sort while scrolled to bottom  function GoTop      document getElementById  TableContainer   scrollTop   0          gt    lt  script gt   lt  head gt   lt body gt     lt table cellpadding  0  cellspacing  0  border  0  gt   lt tr gt  lt td gt   lt div id  TableContainer  class  TableContainer  style  height 230px   gt   lt table class  scrollTable  gt    lt thead class  fixedHeader headerFormat  gt     lt tr gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  gt  lt b gt NAME lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Amt lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Lvl lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Rank lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Position lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt      lt td class  point  onclick  GoTop    sortTable this 1    title  Sort  align  right  gt  lt b gt Date lt  b gt   lt img src  data image gif base64 R0lGODlhCgAKALMLAHaRdnCTcHegd7C8sNTa1Ku4q9vg24GXgfr8 uDl4P       wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAAoAAAQfcMlJq12hIHKoSEqIdBIQnslknkoqfedIBQNikFduRQA7  border  0  gt  lt  td gt     lt  tr gt    lt  thead gt    lt tbody class  scrollContent bodyFormat  style  height 200px   gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 23423  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 32  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 1  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt 99  lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt  19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt 100  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Marhanen lt  td gt       lt td align  right  gt  223 04 lt  td gt       lt td align  right  gt 83 lt  td gt       lt td align  right  gt 59  lt  td gt       lt td gt Banker lt  td gt       lt td align  right  gt 06 27 2006 lt  td gt      lt  tr gt      lt tr gt       lt td gt Peter lt  td gt       lt td align  right  gt  121 lt  td gt       lt td align  right  gt 567 lt  td gt       lt td align  right  gt 534 23  lt  td gt       lt td gt FishHead lt  td gt       lt td align  right  gt 06 06 2006 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Jones lt  td gt       lt td align  right  gt  15 lt  td gt       lt td align  right  gt 11 lt  td gt       lt td align  right  gt 15  lt  td gt       lt td gt Bubba lt  td gt       lt td align  right  gt 10 27 2005 lt  td gt      lt  tr gt      lt tr gt       lt td gt Supa-De-Dupa lt  td gt       lt td align  right  gt  145 lt  td gt       lt td align  right  gt 91 lt  td gt       lt td align  right  gt 42  lt  td gt       lt td gt momma lt  td gt       lt td align  right  gt 12 15 1996 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt ClickClock lt  td gt       lt td align  right  gt  1 213 lt  td gt       lt td align  right  gt 23 lt  td gt       lt td align  right  gt 2  lt  td gt       lt td gt Dada lt  td gt       lt td align  right  gt 1 30 1998 lt  td gt      lt  tr gt      lt tr gt       lt td gt Mrs  Robinson lt  td gt       lt td align  right  gt  99 lt  td gt       lt td align  right  gt 99 lt  td gt       lt td align  right  gt  -10 42   lt  td gt       lt td gt Wife lt  td gt       lt td align  right  gt 07 04 1963 lt  td gt      lt  tr gt      lt tr class  alternateRow  gt       lt td gt Maha lt  td gt       lt td align  right  gt - 19 923 19 lt  td gt       lt td align  right  gt 100 lt  td gt       lt td align  right  gt  -10 01   lt  td gt       lt td gt Owner lt  td gt       lt td align  right  gt 01 02 2001 lt  td gt      lt  tr gt      lt tr gt       lt td gt Thrawl lt  td gt       lt td align  right  gt  9 550 lt  td gt       lt td align  right  gt 159 lt  td gt       lt td align  right  gt -10 20  lt  td gt       lt td gt Co-Owner lt  td gt       lt td align  right  gt 11 07 2003 lt  td gt      lt  tr gt      lt tr class  total  gt       lt td gt  lt strong gt TOTAL lt  strong gt   lt  td gt       lt td align  right  gt  lt strong gt 999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 9999999 lt  strong gt  lt  td gt       lt td align  right  gt  lt strong gt 99 lt  strong gt  lt  td gt       lt td  gt   lt  td gt       lt td align  right  gt   lt  td gt      lt  tr gt    lt  tbody gt   lt  table gt   lt  div gt   lt  td gt  lt  tr gt   lt  table gt   lt  body gt   lt  html gt

User · Answer

It s actually do-able without JavaScript  but using pure CSS   HTML with sticky position  Just add  quot position sticky quot  to the cells you d like to freeze  For building a table  you can either use  or CSS grid  and this technique works on both of them  Here is an example formatting with table tag   live demo here     lt table gt     lt tr gt  lt th class  quot head quot  gt  lt  th class  quot head quot  gt  lt th gt  lt  th gt       lt  tr gt     lt tr gt  lt th class  quot head quot  gt  lt  th gt               lt th gt  lt  th gt       lt  tr gt       lt  table gt   lt style type  quot text css quot  gt     head   position  sticky  top  0  left  0    lt  style gt   And here is an example with CSS Grid   live demo here     lt div class  quot grid quot  gt      lt  -- cells to freeze -- gt      lt div class  quot entry head quot  gt  lt  div gt      lt div class  quot entry head quot  gt  lt  div gt             lt  -- normal cells -- gt      lt div class  quot entry quot  gt  lt  div gt          lt  div gt   lt style type  quot text css quot  gt     grid       display  grid      grid-template-columns  repeat  lt your-cell-count gt    lt cell-size gt             entry head   position  sticky  top  0  left  0    lt  style gt   You probably will need to take care of the cells frozen both horizontally and vertically   e g    setting a z-index larger than others   but it will be still CSS thing  I think the main drawback of this approach is  probably  the browser compatibility issue  Check Can I Use CSS-sticky and Can I use CSS grid before using these techniques

User · Answer

Here a plugin JQuery  https   github com nitsugario jQuery-Freeze-Table-Column-and-Rows  This is a jQuery plugin that can make table rows and columns not scroll   It can take a given HTML table object and set it so it can freeze a given number of columns or rows or both  so the fixed columns or rows do not scroll   The rows to be frozen should be placed in the table head section   It can also freeze rows and columns combined with using colspan or rowspan attributes

User · Answer

How about a solution where you put the actual "data" of the table inside its own div, with overflow: scroll;? Then the browser will automatically create scrollbars for the portion of the "table" you do not want to lock, and you can put the "table header"/first row just above that <div>.

Not sure how that would work with scrolling horizontally though.

User · Answer

I did this with a combination of     Using multiple tables Fixed-size cells jQuery s scrollTop and scrollLeft functions   Here s a jsfiddle example to demonstrate    Haven t tested on all browsers but I imagine it s not great on older IE versions    x000D   x000D      clscroll-content   scroll function     x000D          clscroll-row-headers   scrollTop     clscroll-content   scrollTop     x000D          clscroll-column-headers   scrollLeft     clscroll-content   scrollLeft     x000D      x000D   x000D      clscroll-column-headers   scroll function     x000D          clscroll-content   scrollLeft     clscroll-column-headers   scrollLeft     x000D      x000D   x000D      clscroll-row-headers   scroll function     x000D          clscroll-content   scrollTop     clscroll-row-headers   scrollTop     x000D      x000D   clscroll table   x000D      table-layout  fixed  x000D    x000D   x000D   clscroll td   clscroll th    x000D      overflow  hidden  x000D    x000D   x000D   corner-header   x000D      float  left  x000D    x000D   x000D   column-headers   x000D      float  left  x000D      overflow  scroll  x000D    x000D   x000D   row-headers   x000D      clear  both  x000D      float  left      x000D      overflow  scroll  x000D    x000D   x000D   table-content   x000D      table-layout  fixed  x000D      float  left  x000D      overflow  scroll  x000D    x000D   x000D   clscroll td   clscroll th    x000D      width  200px  x000D      border  1px solid black  x000D    x000D   x000D   row-headers   table-content   x000D      height  100px  x000D    x000D   x000D   column-headers   table-content   table-content table   column-headers table   x000D      width  400px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  clscroll corner-header  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt  amp nbsp  lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll column-headers  id  clscroll-column-headers  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt Bus lt  th gt  x000D             lt th gt Plane lt  th gt  x000D             lt th gt Boat lt  th gt  x000D             lt th gt Bicycle lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll row-headers  id  clscroll-row-headers  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt th gt Red lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Green lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Blue lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Orange lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Purple lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Yellow lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Pink lt  th gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt th gt Brown lt  th gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   lt div class  clscroll table-content  id  clscroll-content  gt  x000D     lt table gt  x000D         lt tr gt  x000D             lt td gt Red Bus lt  td gt  x000D             lt td gt Red Plane lt  td gt  x000D             lt td gt Red Boat lt  td gt  x000D             lt td gt Red Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Green Bus lt  td gt  x000D             lt td gt Green Plane lt  td gt  x000D             lt td gt Green Boat lt  td gt  x000D             lt td gt Green Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Blue Bus lt  td gt  x000D             lt td gt Blue Plane lt  td gt  x000D             lt td gt Blue Boat lt  td gt  x000D             lt td gt Blue Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Orange Bus lt  td gt  x000D             lt td gt Orange Plane lt  td gt  x000D             lt td gt Orange Boat lt  td gt  x000D             lt td gt Orange Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Purple Bus lt  td gt  x000D             lt td gt Purple Plane lt  td gt  x000D             lt td gt Purple Boat lt  td gt  x000D             lt td gt Purple Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Yellow Bus lt  td gt  x000D             lt td gt Yellow Plane lt  td gt  x000D             lt td gt Yellow Boat lt  td gt  x000D             lt td gt Yellow Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Pink Bus lt  td gt  x000D             lt td gt Pink Plane lt  td gt  x000D             lt td gt Pink Boat lt  td gt  x000D             lt td gt Pink Bicycle lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D             lt td gt Brown Bus lt  td gt  x000D             lt td gt Brown Plane lt  td gt  x000D             lt td gt Brown Boat lt  td gt  x000D             lt td gt Brown Bicycle lt  td gt  x000D         lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need two tables  where the first one is an exact overlay over the second one  The second one contains all the data  where the first one just contains the first column  You have to synchronize it s width and depending on the content also the height of it s rows    Additional to this two tables  you need a third one  That s the first row  which lays exactly between the other two and has to be synchronized in the same way   You will need absolute positioning here  Next  you would synchronize the scrolling of the data table with the scrolling positions of the head row and first column table   That works very well in all major browsers  except for one issue  The synchronized scrolling will flutter  To fix that  you need two outher div containers that hold a clone of the content of the header row and the first column  When scrolling vertically  you display the header row clone to prevent fluttering  while you reposition the original in the background  When scrolling horizontally  you would show the first row clone  Same thing here

User · Answer

I ve posted my jQuery plugin solution here  Frozen table header inside scrollable div  It does exactly what you want and is really lightweight and easy to use

User · Answer

I ran across a site a few weeks back  This is a working example of the first column locked but it is not browser compatible with Firefox  I didn t do a lot of checking around but it seems it only works in IE  There are some notes the author provided along with it that you can read   Lock the First column  http   home tampabay rr com bmerkey examples locked-column-csv html  Let me know if you need the Javascript to lock the Table headers too

[javascript] How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

The answer is

Examples related to javascript

Examples related to css

Examples related to excel

Examples related to scroll

Examples related to css-tables

Tags