Fix columns in horizontal scrolling

Question

I am currently trying to fix my first column in a table when the user scrolls in the X-axis  I am using this structure    lt div class  table-wrapper  gt       lt table id  consumption-data  class  data  gt           lt thead class  header  gt               lt tr gt                   lt th gt Month lt  th gt                   lt th gt Item 1 lt  th gt               lt  tr gt           lt  thead gt           lt tbody class  results  gt               lt tr gt                   lt th gt Jan lt  th gt                   lt td gt 3163 lt  td gt               lt  tr gt               lt tr gt                   lt th gt Feb lt  th gt                   lt td gt 3163 7 lt  td gt                        lt  tr gt               lt tr gt                   lt th gt Mar lt  th gt                   lt td gt 3163 7 lt  td gt               lt  tr gt               lt tr gt                   lt th gt Apr lt  th gt                   lt td gt 3163 7 lt  td gt                   lt  tr gt               lt tr gt                       lt th gt May lt  th gt                   lt td gt 3163 7 lt  td gt               lt  tr gt               lt tr gt                   lt th gt Jun lt  th gt                   lt td gt 3163 7 lt  td gt               lt  tr gt                lt tr gt                   lt th gt     lt  th gt                   lt td gt     lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt    The number of items will be picked by the user  i e  it could be 90 items in the table  This will require scrolling in the X-axis  The question I have got though is   How do I fix the position of the th tags inside the tbody  and the th first-child in the thead    I have been looking at some other threads  however they do not really explain how I achieve the fixed columns which makes it hard for me to understand what the codes does and what I am supposed to do   I have also checked on solutions where people split up the header-column in another table  This wont be possible for me because I will export the data to other systems later on   My css    table-wrapper        overflow-x scroll      overflow-y visible      This fixes the scroll  now comes the work with   tbody th   thead th first-child      Anyone got any ideas   EDIT  Here is a jsFiddle  http   jsfiddle net DJqPf 5

User · Accepted Answer

SOLVED  http   jsfiddle net DJqPf 7    table-wrapper        overflow-x scroll      overflow-y visible      width 250px      margin-left  120px    td  th       padding  5px 20px      width  100px    th first-child       position  fixed      left  5px       UPDATE   x000D   x000D    function        x000D        table-wrapper tr   each function      x000D      var tr     this   x000D          h   0  x000D      tr children   each function      x000D        var td     this   x000D            tdh   td height    x000D        if  tdh  gt  h  h   tdh  x000D          x000D      tr css  height  h    px     x000D        x000D      x000D  body   x000D      position  relative  x000D    x000D   table-wrapper    x000D      overflow-x scroll  x000D      overflow-y visible  x000D      width 200px  x000D      margin-left  120px  x000D    x000D   x000D   x000D  td  th   x000D      padding  5px 20px  x000D      width  100px  x000D    x000D  tbody tr   x000D     x000D    x000D  th first-child   x000D      position  absolute  x000D      left  5px x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script src  https   code jquery com jquery-2 2 3 min js  gt  lt  script gt  x000D     lt meta charset  utf-8  gt  x000D     lt title gt JS Bin lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div gt  x000D       lt h1 gt SOME RANDOM TEXT lt  h1 gt  x000D   lt  div gt  x000D   lt div class  table-wrapper  gt  x000D       lt table id  consumption-data  class  data  gt  x000D           lt thead class  header  gt  x000D               lt tr gt  x000D                   lt th gt Month lt  th gt  x000D                   lt th gt Item 1 lt  th gt  x000D                   lt th gt Item 2 lt  th gt  x000D                   lt th gt Item 3 lt  th gt  x000D                   lt th gt Item 4 lt  th gt  x000D               lt  tr gt  x000D           lt  thead gt  x000D           lt tbody class  results  gt  x000D               lt tr gt  x000D                   lt th gt Jan is an awesome month lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt th gt Feb lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt th gt Mar lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt th gt Apr lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt    x000D               lt  tr gt  x000D               lt tr gt      x000D                   lt th gt May lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt th gt Jun lt  th gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D                   lt td gt 3163 lt  td gt  x000D               lt  tr gt  x000D   x000D               lt tr gt  x000D                   lt th gt     lt  th gt  x000D                   lt td gt     lt  td gt  x000D                   lt td gt     lt  td gt  x000D                   lt td gt     lt  td gt  x000D                   lt td gt     lt  td gt  x000D               lt  tr gt  x000D           lt  tbody gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   lt div gt  x000D   lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Solved using JavaScript   jQuery  I just need similar solution to my project but current solution with HTML and CSS is not ok for me because there is issue with column height   I need more then one column to be fixed  So I create simple javascript solution using jQuery  You can try it here https   jsfiddle net kindrosker ffwqvntj   All you need is setup home many columsn will be fixed in  data-count-fixed-columns parameter    lt table class  table  data-count-fixed-columns  2  cellpadding  0  cellspacing  0  gt    and run js function  app handle listing horisontal scroll     table-listing

User · Answer

Demo  http   www jqueryscript net demo jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer   HTML   lt h2 gt TableHeadFixer Fix Left Column lt  h2 gt    lt div id  parent  gt       lt table id  fixTable  class  table  gt           lt thead gt               lt tr gt                   lt th gt Ano lt  th gt                   lt th gt Jan lt  th gt                   lt th gt Fev lt  th gt                   lt th gt Mar lt  th gt                   lt th gt Abr lt  th gt                   lt th gt Maio lt  th gt                   lt th gt Total lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt 2012 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 550 00 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 2012 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 550 00 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 2012 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 550 00 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 2012 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 550 00 lt  td gt               lt  tr gt               lt tr gt                   lt td gt 2012 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 110 00 lt  td gt                   lt td gt 550 00 lt  td gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt    JS        document  ready function                 fixTable   tableHeadFixer   head    false   right    1               CSS       parent           height  300px              fixTable           width  1800px  important          https   jsfiddle net 5gfuqqc4

[html] Fix columns in horizontal scrolling

Examples related to html

Examples related to css