How to make Scrollable Table with fixed headers using CSS

Question

I want to make header of my table fixed Table is present inside the scrollable div Please see my code here     http   jsfiddle net w7Mm8 114  kindly suggest me the solution to this   Thanks  My Code    x000D   x000D   lt div style  position  absolute  height  200px  overflow  auto    gt  x000D       lt div style  height  250px   gt  x000D           lt table border  1  gt  x000D               lt th gt head1 lt  th gt  x000D               lt th gt head2 lt  th gt  x000D               lt th gt head3 lt  th gt  x000D               lt th gt head4 lt  th gt  x000D               lt tr gt  x000D                   lt td gt row 1  cell 1 lt  td gt  x000D                   lt td gt row 1  cell 2 lt  td gt  x000D                   lt td gt row 1  cell 2 lt  td gt  x000D                   lt td gt row 1  cell 2 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt row 2  cell 1 lt  td gt  x000D                   lt td gt row 2  cell 2 lt  td gt  x000D                   lt td gt row 1  cell 2 lt  td gt  x000D                   lt td gt row 1  cell 2 lt  td gt  x000D               lt  tr gt  x000D           lt  table gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I can think of a cheeky way to do it  I don t think this will be the best option but it will work   Create the header as a separate table then place the other in a div and set a max size  then allow the scroll to come in by using overflow    x000D   x000D  table   x000D    width  500px  x000D    x000D   x000D   scroll   x000D    max-height  60px  x000D    overflow  auto  x000D    x000D   lt table border  1  gt  x000D     lt tr gt  x000D     lt th gt head1 lt  th gt  x000D     lt th gt head2 lt  th gt  x000D     lt th gt head3 lt  th gt  x000D     lt th gt head4 lt  th gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   lt div class  scroll  gt  x000D     lt table gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt More Text lt  td gt  lt td gt More Text lt  td gt  lt td gt More Text lt  td gt  lt td gt More Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt td gt Text Text lt  td gt  lt  tr gt  x000D       lt tr gt  lt td gt Even More Text Text lt  td gt  lt td gt Even More Text Text lt  td gt  lt td gt Even More Text Text lt  td gt  lt td gt Even More Text Text lt  td gt  lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

What you want to do is separate the content of the table from the header of the table  You want only the  lt th gt  elements to be scrolled  You can easily define this separation in HTML with the  lt tbody gt  and the  lt thead gt  elements    Now the header and the body of the table are still connected to each other  they will still have the same width  and same scroll properties   Now to let them not  work  as a table anymore you can set the display  block  This way  lt thead gt  and  lt tbody gt  are separated   table tbody  table thead       display  block      Now you can set the scroll to the body of the table   table tbody       overflow  auto     height  100px      And last  because the  lt thead gt  doesn t share the same width as the body anymore  you should set a static width to the header of the table   th       width  72px      You should also set a static width for  lt td gt   This solves the issue of the unaligned columns   td       width  72px       Note that you are also missing some HTML elements  Every row should be in a  lt tr gt  element  that includes the header row    lt tr gt        lt th gt head1 lt  th gt        lt th gt head2 lt  th gt        lt th gt head3 lt  th gt        lt th gt head4 lt  th gt   lt  tr gt    I hope this is what you meant   jsFiddle  Addendum   If you would like to have more control over the column widths  have them to vary in width between each other  and course keep the header and body columns aligned  you can use the following example       table th nth-child 1   td nth-child 1    min-width  50px   max-width  50px        table th nth-child 2   td nth-child 2    min-width  100px  max-width  100px        table th nth-child 3   td nth-child 3    min-width  150px  max-width  150px        table th nth-child 4   td nth-child 4    min-width  200px  max-width  200px

[html] How to make Scrollable Table with fixed headers using CSS

Examples related to html

Examples related to css

Examples related to html-table