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

What you want to do is separate the content of the table from the header of the table. You want only the <th> elements to be scrolled. You can easily define this separation in HTML with the <tbody> and the <thead> 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 <thead> and <tbody> 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 <thead> 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 <td>. 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 <tr> element, that includes the header row:

<tr>
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
     <th>head4</th>
</tr>

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; }

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

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

The answer is

Examples related to html

Examples related to css

Examples related to html-table

Tags