Freeze the top row for an html table only Fixed Table Header Scrolling

Question

I want to make an html table with the top row frozen  so when you scroll down vertically you can always see it     Is there a clever way to make this happen without javascript   Note that I do NOT need the left column frozen

User · Answer

The Chromatable jquery plugin allows a fixed header (or top row) with widths that allow percentages--granted, only a percentage of 100%.

http://www.chromaloop.com/posts/chromatable-jquery-plugin

I can't think of how you could do this without javascript.

update: new link -> http://www.jquery-plugins.info/chromatable-00012248.htm

User · Answer

My concern was not to have the cells with fixed width  Which seemed to be not working in any case  I found this solution which seems to be what I need  I am posting it here for others who are searching of a way  Check out this fiddle  Working Snippet    x000D   x000D  html  body  x000D    margin 0  x000D    padding 0  x000D    height 100   x000D    x000D  section   x000D    position  relative  x000D    border  1px solid  000  x000D    padding-top  37px  x000D    background   500  x000D    x000D  section positioned   x000D    position  absolute  x000D    top 100px  x000D    left 100px  x000D    width 800px  x000D    box-shadow  0 0 15px  333  x000D    x000D   container   x000D    overflow-y  auto  x000D    height  160px  x000D    x000D  table   x000D    border-spacing  0  x000D    width 100   x000D    x000D  td   td   x000D    border-left 1px solid  eee  x000D    x000D  td  th   x000D    border-bottom 1px solid  eee  x000D    background   ddd  x000D    color   000  x000D    padding  10px 25px  x000D    x000D  th   x000D    height  0  x000D    line-height  0  x000D    padding-top  0  x000D    padding-bottom  0  x000D    color  transparent  x000D    border  none  x000D    white-space  nowrap  x000D    x000D  th div  x000D    position  absolute  x000D    background  transparent  x000D    color   fff  x000D    padding  9px 25px  x000D    top  0  x000D    margin-left  -25px  x000D    line-height  normal  x000D    border-left  1px solid  800  x000D    x000D  th first-child div  x000D    border  none  x000D    x000D   lt section class    gt  x000D     lt div class  container  gt  x000D       lt table gt  x000D         lt thead gt  x000D           lt tr class  header  gt  x000D             lt th gt  x000D              Table attribute name x000D               lt div gt Table attribute name lt  div gt  x000D             lt  th gt  x000D             lt th gt  x000D              Value x000D               lt div gt Value lt  div gt  x000D             lt  th gt  x000D             lt th gt  x000D              Description x000D               lt div gt Description lt  div gt  x000D             lt  th gt  x000D           lt  tr gt  x000D         lt  thead gt  x000D         lt tbody gt  x000D           lt tr gt  x000D             lt td gt align lt  td gt  x000D             lt td gt left  center  right lt  td gt  x000D             lt td gt Not supported in HTML5  Deprecated in HTML 4 01  Specifies the alignment of a table according to surrounding text lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt bgcolor lt  td gt  x000D             lt td gt rgb x x x    xxxxxx  colorname lt  td gt  x000D             lt td gt Not supported in HTML5  Deprecated in HTML 4 01  Specifies the background color for a table lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt border lt  td gt  x000D             lt td gt 1    lt  td gt  x000D             lt td gt Specifies whether the table cells should have borders or not lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt cellpadding lt  td gt  x000D             lt td gt pixels lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the space between the cell wall and the cell content lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt cellspacing lt  td gt  x000D             lt td gt pixels lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the space between cells lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt frame lt  td gt  x000D             lt td gt void  above  below  hsides  lhs  rhs  vsides  box  border lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies which parts of the outside borders that should be visible lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt rules lt  td gt  x000D             lt td gt none  groups  rows  cols  all lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies which parts of the inside borders that should be visible lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt summary lt  td gt  x000D             lt td gt text lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies a summary of the content of a table lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D             lt td gt width lt  td gt  x000D             lt td gt pixels    lt  td gt  x000D             lt td gt Not supported in HTML5  Specifies the width of a table lt  td gt  x000D           lt  tr gt  x000D         lt  tbody gt  x000D       lt  table gt  x000D     lt  div gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

According to Pure CSS Scrollable Table with Fixed Header   I wrote a DEMO to easily fix the header by setting overflow auto to the tbody   table thead tr      display block     table th table td      width 100px   fixed width     table  tbody    display block    height 200px    overflow auto   set tbody to auto

User · Answer

you can use two divs one for the headings and the other for the table   then use    headings     position  fixed    top  0px    width  960px      as  ptriek said this will only work for fixed width columns

User · Answer

Using css zebra styling  Copy paste this example and see the header fixed           lt style gt          zebra tr nth-child odd          background white         color black                    zebra tr nth-child even          background  grey         color black                   zebra tr nth-child 1           background black         color yellow         position  fixed         margin -30px 0px 0px 0px                   lt  style gt        lt DIV  id   stripped div            class   zebra           style                 border solid 1px red              height 15px              width 200px              overflow-x none              overflow-y scroll              padding 30px 0px 0px 0px                gt                    lt table gt                      lt tr  gt                          lt td gt Name  lt  td gt                          lt td gt Age  lt  td gt                      lt  tr gt                       lt tr  gt                          lt td gt Peter lt  td gt                          lt td gt 10 lt  td gt                      lt  tr gt                   lt  table gt        lt  DIV gt    Notice the top padding of of 30px in the div leaves  space that is utilized by the 1st row of stripped data ie  tr nth-child 1  that is  fixed position   and formatted to a margin of -30px

User · Answer

I use this   tbody    overflow-y  auto    height  350px    width  102     thead tbody      display  block      I define the columns width with bootstrap css col-md-xx  Without defining the columns width the auto-width of the doesn t match the   The 102  percent is because you lose some sapce with the overflow

User · Answer

This is called Fixed Header Scrolling  There are a number of documented approaches   http   www imaputz com cssStuff bigFourVersion html  You won t effectively pull this off without JavaScript     especially if you want cross browser support   There are a number of gotchyas with any approach you take  especially concerning cross browser version support   Edit    Even if it s not the header you want to fix  but the first row of data  the concept is still the same  I wasn t 100  which you were referring to   Additional thought I was tasked by my company to research a solution for this that could function in IE7   Firefox  and Chrome   After many moons of searching  trying  and frustration it really boiled down to a fundamental problem  For the most part  in order to gain the fixed header  you need to implement fixed height width columns because most solutions involve using two separate tables  one for the header which will float and stay in place over the second table that contains the data     float this one right over second table  lt table gt     lt tr gt       lt th gt Header 1 lt  th gt       lt th gt Header 2 lt  th gt     lt  tr gt   lt  table gt    lt table gt    Data  lt  table gt    An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can t limit its height  so stupid IMO     lt table gt     lt thead style  do some stuff to fix its position  gt     lt tr gt       lt th gt Header 1 lt  th gt       lt th gt Header 2 lt  th gt     lt  tr gt     lt  thead gt     lt tbody style  No scrolling allowed here   gt       Data here    lt  tbody gt   lt  table gt    This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT  AFAIK  guarantee that the distribution will be perfect in all cases  It becomes glaringly obvious if you have borders within your table   I took a different approach and said screw tables since you can t make this guarantee  I used divs to mimic tables  This also has issues of positioning the rows and columns  mainly because floating has issues  using in-line block won t work for IE7  so it really left me with using absolute positioning to put them in their proper places    There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good  albeit complex  example for achieving this   https   github com 6pac SlickGrid wiki

User · Answer

I know this has several answers  but none of these really helped me  I found  this article  1  which explains why my sticky wasn t operating as expected  Basically  you cannot use position  sticky  on  lt thead gt  or  lt tr gt  elements  However  they can be used on  lt th gt   The minimum code I needed to make it work is as follows  table     text-align  left    position  relative     th     background  white    position  sticky    top  0     With the table set to relative the  lt th gt  can be set to sticky  with the top at 0  1   https   css-tricks com position-sticky-and-table-headers  NOTE  It s necessary to wrap the table with a div with max-height   lt div id  quot managerTable quot   gt       lt  div gt   where   managerTable       max-height  500px      overflow  auto

User · Answer

It is possible using position fixed on  lt th gt    lt th gt  being the top row    Here s an example

User · Answer

You can use CSS position  sticky  for the first row of the table MDN ref    table-class tr first-child gt td      position  sticky      top  0

[html] Freeze the top row for an html table only (Fixed Table Header Scrolling)

Examples related to html

Examples related to css