How to make fixed header table inside scrollable div

Question

I want to make header of my table fixed  Table is present inside the scrollable div  Below is my code    lt div id  table-wrapper  gt       lt div id  table-scroll  gt           lt table bgcolor  white  border  0  cellpadding  0  cellspacing  0  id  header-fixed  width  100   overflow  scroll  class  scrollTable  gt               lt thead gt                   lt tr gt                       lt th gt Order ID lt  th gt                       lt th gt Order Date lt  th gt                       lt th gt Status lt  th gt                       lt th gt Vol Number lt  th gt                       lt th gt Bonus Paid lt  th gt                       lt th gt Reason for no Bonus lt  th gt                   lt  tr gt               lt  thead gt               lt tbody gt                   lt tr gt                       lt td gt  lt   snd getOrderId    gt  lt  td gt                       lt td gt  lt   snd getDateCaptured    gt  lt  td gt                       lt td gt  lt   snd getOrderStatus    gt  lt  td gt                       lt td gt Data Not Available lt  td gt                       lt td gt Data Not Available lt  td gt                       lt td gt Data Not Available lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt    Below is my CSS  which I am using for the above div    table-wrapper       position relative      table-scroll       height 250px      overflow auto        margin-top 20px      table-wrapper table       width 100       table-wrapper table         background white      color black      table-wrapper table thead th  text       position absolute         top -20px      z-index 2      height 20px      width 35       border 1px solid red

User · Answer

This code works form me  Include the jquery js file    lt  DOCTYPE html gt   lt html gt    lt head gt   lt script src  jquery js  gt  lt  script gt   lt script gt  var headerDivWidth 0  var contentDivWidth 0  function fixHeader     var contentDivId    contentDiv   var headerDivId    headerDiv    var header   document createElement  table    var headerRow   document getElementById  tableColumnHeadings        Start   Place header table inside  lt DIV gt  and place this  lt DIV gt  before content table   var headerDiv     lt div id    headerDivId    style  width 500px overflow-x hidden overflow-y scroll  class  tableColumnHeadings  gt  lt table gt  lt  table gt  lt  div gt      headerRow  wrap headerDiv         headerDivId  insertBefore     contentDivId     End   Place header table inside  lt DIV gt  and place this  lt DIV gt  before content table    fixColumnWidths headerDivId contentDivId     function fixColumnWidths headerDivId contentDivId      Start   Place header row cell and content table first row cell inside  lt DIV gt                 var contentFirstRowCells         contentDivId   table tr first-child td                for  k   0  k  lt  contentFirstRowCells length  k                         contentFirstRowCells k    wrapInner    lt div  gt  lt  div gt                               var headerFirstRowCells         headerDivId   table tr first-child td                for  k   0  k  lt  headerFirstRowCells length  k                         headerFirstRowCells k    wrapInner    lt div gt  lt  div gt                      End   Place header row cell and content table first row cell inside  lt DIV gt         Start   Fix width for columns of header cells and content first ror cells               var headerColumns         headerDivId   table tr first-child td div first-child                var contentColumns         contentDivId   table tr first-child td div first-child                for  i   0  i  lt  contentColumns length  i                      if  i    contentColumns length - 1                        contentCellWidth   contentColumns i  offsetWidth                                    else                       contentCellWidth   contentColumns i  offsetWidth                                    headerCellWidth   headerColumns i  offsetWidth                  if contentCellWidth gt headerCellWidth                     headerColumns i   css  width   contentCellWidth  px                      contentColumns i   css  width   contentCellWidth  px                     else                    headerColumns i   css  width   headerCellWidth  px                      contentColumns i   css  width   headerCellWidth  px                                      End   Fix width for columns of header and columns of content table first row             function OnScrollDiv Scrollablediv        document getElementById  headerDiv   scrollLeft   Scrollablediv scrollLeft        function radioCount        alert document form elements length          lt  script gt   lt style gt  table th td   border 1px solid black  border-collapse collapse    th td   padding 5px     lt  style gt    lt  head gt    lt body onload  fixHeader     gt   lt form id  form  name  form  gt   lt div id  contentDiv  style  width 500px height 100px overflow auto   onscroll  OnScrollDiv this   gt   lt table gt   lt  --tr id  tableColumnHeadings  class  tableColumnHeadings  gt     lt td gt  lt div gt Firstname lt  div gt  lt  td gt     lt td gt  lt div gt Lastname lt  div gt  lt  td gt           lt td gt  lt div gt Points lt  div gt  lt  td gt     lt  tr gt    lt tr gt     lt td gt  lt div gt Jillsddddddddddddddddddddddddddd lt  div gt  lt  td gt     lt td gt  lt div gt Smith lt  div gt  lt  td gt          lt td gt  lt div gt 50 lt  div gt  lt  td gt     lt  tr-- gt      lt tr id  tableColumnHeadings  class  tableColumnHeadings  gt     lt td gt  amp nbsp  lt  td gt      lt td gt Firstname lt  td gt     lt td gt Lastname lt  td gt          lt td gt Points lt  td gt     lt  tr gt    lt tr style  height 0px  gt   lt td gt  lt  td gt     lt td gt  lt  td gt     lt td gt  lt  td gt          lt td gt  lt  td gt     lt  tr gt    lt tr  gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID  onclick  javascript radioCount      gt  lt  td gt     lt td gt Jillsddddddddddddddddddddddddddd lt  td gt     lt td gt Smith lt  td gt             lt td gt 50 lt  td gt     lt  tr gt    lt tr gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID   gt  lt  td gt      lt td gt Eve lt  td gt     lt td gt Jackson lt  td gt           lt td gt 9400000000000000000000000000000 lt  td gt   lt  tr gt   lt tr gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID   gt  lt  td gt      lt td gt John lt  td gt     lt td gt Doe lt  td gt           lt td gt 80 lt  td gt   lt  tr gt   lt tr gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID   gt  lt  td gt      lt td gt  lt div gt Jillsddddddddddddddddddddddddddd lt  div gt  lt  td gt     lt td gt  lt div gt Smith lt  div gt  lt  td gt          lt td gt  lt div gt 50 lt  div gt  lt  td gt     lt  tr gt   lt tr gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID   gt  lt  td gt      lt td gt Eve lt  td gt     lt td gt Jackson lt  td gt           lt td gt 9400000000000000000000000000000 lt  td gt   lt  tr gt   lt tr gt   lt td gt  lt input type  radio  id  SELECTED ID  name  SELECTED ID   gt  lt  td gt      lt td gt John lt  td gt     lt td gt Doe lt  td gt           lt td gt 80 lt  td gt   lt  tr gt   lt  table gt   lt  div gt    lt  form gt   lt  body gt    lt  html gt

User · Answer

use StickyTableHeaders js for this    Header was transparent   so try to add this css    thead       border-top  none      border-bottom  none      background-color   FFF

User · Answer

I needed the same and this solution worked the most simple and straightforward way:

http://www.farinspace.com/jquery-scrollable-table-plugin/

I just give an id to the table I want to scroll and put one line in Javascript. That's it!

By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.

User · Answer

A Fiddle would have been more helpful nevertheless from what I understand  I guess what you need is persistent headers  look into this  http   css-tricks com persistent-headers

User · Answer

None of the other examples provided worked in my case - e.g. header would not match table body content when scrolling. I found a much simpler and clean way, allowing you to setup the table the normal way, and without too much code.

Example:

_x000D_

.table-wrapper{
  overflow-y: scroll;
  height: 100px;
}

.table-wrapper th{
    position: sticky;
    top: 0;
    background-color: #FFF;
}

_x000D_

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
        </tbody>
    </table>
</div>

_x000D_

Thanks to https://algoart.fr/articles/css-table-fixed-header

User · Answer

Some of these answers seem unnecessarily complex. Make your tbody:

display: block; height: 300px; overflow-y: auto

Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.

User · Answer

How about doing something like this  I ve made it from scratch     What I ve done is used 2 tables  one for header  which will be static always  and the other table renders cells  which I ve wrapped using a div element with a fixed height  and to enable scroll  am using overflow-y  auto   Also make sure you use table-layout  fixed  with fixed width td elements so that your table doesn t break when a string without white space is used  so inorder to break that string am using word-wrap  break-word   Demo   wrap       width  352px      wrap table       width  300px      table-layout  fixed     table tr td       padding  5px      border  1px solid  eee      width  100px      word-wrap  break-word     table head tr td       background   eee      inner table       height  100px      overflow-y  auto      lt div class  wrap  gt       lt table class  head  gt           lt tr gt               lt td gt Head 1 lt  td gt               lt td gt Head 1 lt  td gt               lt td gt Head 1 lt  td gt           lt  tr gt       lt  table gt       lt div class  inner table  gt           lt table gt           lt tr gt               lt td gt Body 1 lt  td gt               lt td gt Body 1 lt  td gt               lt td gt Body 1 lt  td gt           lt  tr gt           lt  -- Some more tr s -- gt       lt  table gt       lt  div gt   lt  div gt

User · Answer

I think you need something like this               lt style gt   table width  500px height  200px border-collapse collapse    table-wrap max-height  200px width 100  overflow-y auto overflow-x hidden    table-dalam height 300px width 500px border-collapse collapse    td-nya border-left 1px solid white border-right 1px solid grey border-bottom 1px solid    grey     lt  style gt    lt table class  table  gt   lt thead gt       lt tr gt       lt th gt Judul1 lt  th gt       lt th gt Judul2 lt  th gt       lt th gt Judul3 lt  th gt       lt th gt Judul4 lt  th gt      lt  tr gt    lt  thead gt    lt tbody gt      lt tr gt         lt td colspan  4  gt         lt div class  table-wrap   gt         lt table class  table-dalam  gt            lt tbody gt                lt  php foreach range 1 10  as  i     gt                    lt tr  gt                        lt td class  td-nya  gt td1  lt  td gt                        lt td class  td-nya  gt td2 lt  td gt                        lt td class  td-nya  gt td2 lt  td gt                        lt td class  td-nya  gt td2 lt  td gt                    lt  tr gt                lt  php endforeach   gt           lt  tbody gt          lt  table gt        lt  div gt      lt  td gt    lt  tr gt     lt  tbody gt    lt  table gt    Source

User · Answer

Using position  sticky on th will do the trick    Note  if you use position  sticky on thead or tr  it won t work   https   jsfiddle net hrg3tmxj

User · Answer

This is my  crutches  solution by using html and css  There  used 2 tables and fixed width of tables and table cell s  https   jsfiddle net babaikawow s2xyct24 1   HTML       lt div class  container  gt   lt table class  table  border   1   gt    lt  -- fixed width header -- gt                               lt thead  gt                                   lt tr gt                                       lt th class  tbDataId   gt   lt  th gt                                       lt th class  tbDataName  gt           lt  th gt                                       lt th class  tbDataData  gt      lt  th gt                                       lt th class  tbDataData  gt           lt  th gt                                       lt th class  tbDataDiseases  gt         1 lt  th gt                                       lt th class  tbDataDiseases  gt         2 lt  th gt                                       lt th class  tbDataDiseases  gt         3 lt  th gt                                       lt th class  tbDataDiseases  gt         4 lt  th gt                                       lt th class  tbDataDiseases  gt         5 lt  th gt                                     lt  tr gt                               lt  thead gt                             lt  table gt                             lt div class  scrollTable  gt   lt  -- scrolling block -- gt                               lt table class  table  border   1  gt                                    lt tbody gt                      lt tr gt                         lt td class  tbDataId   gt   lt  td gt                                       lt td class  tbDataName  gt           lt  td gt                                       lt td class  tbDataData  gt      lt  td gt                                       lt td class  tbDataData  gt           lt  td gt                                       lt td class  tbDataDiseases  gt         1 lt  td gt                                       lt td class  tbDataDiseases  gt         2 lt  td gt                                       lt td class  tbDataDiseases  gt         3 lt  td gt                                       lt td class  tbDataDiseases  gt         4 lt  td gt                                       lt td class  tbDataDiseases  gt         5 lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  tbDataId   gt   lt  td gt                                       lt td class  tbDataName  gt           lt  td gt                                       lt td class  tbDataData  gt      lt  td gt                                       lt td class  tbDataData  gt           lt  td gt                                       lt td class  tbDataDiseases  gt         1 lt  td gt                                       lt td class  tbDataDiseases  gt         2 lt  td gt                                       lt td class  tbDataDiseases  gt         3 lt  td gt                                       lt td class  tbDataDiseases  gt         4 lt  td gt                                       lt td class  tbDataDiseases  gt         5 lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  tbDataId   gt   lt  td gt                                       lt td class  tbDataName  gt           lt  td gt                                       lt td class  tbDataData  gt      lt  td gt                                       lt td class  tbDataData  gt           lt  td gt                                       lt td class  tbDataDiseases  gt         1 lt  td gt                                       lt td class  tbDataDiseases  gt         2 lt  td gt                                       lt td class  tbDataDiseases  gt         3 lt  td gt                                       lt td class  tbDataDiseases  gt         4 lt  td gt                                       lt td class  tbDataDiseases  gt         5 lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  tbDataId   gt   lt  td gt                                       lt td class  tbDataName  gt           lt  td gt                                       lt td class  tbDataData  gt      lt  td gt                                       lt td class  tbDataData  gt           lt  td gt                                       lt td class  tbDataDiseases  gt         1 lt  td gt                                       lt td class  tbDataDiseases  gt         2 lt  td gt                                       lt td class  tbDataDiseases  gt         3 lt  td gt                                       lt td class  tbDataDiseases  gt         4 lt  td gt                                       lt td class  tbDataDiseases  gt         5 lt  td gt                       lt  tr gt                       lt tr gt                         lt td class  tbDataId   gt   lt  td gt                                       lt td class  tbDataName  gt           lt  td gt                                       lt td class  tbDataData  gt      lt  td gt                                       lt td class  tbDataData  gt           lt  td gt                                       lt td class  tbDataDiseases  gt         1 lt  td gt                                       lt td class  tbDataDiseases  gt         2 lt  td gt                                       lt td class  tbDataDiseases  gt         3 lt  td gt                                       lt td class  tbDataDiseases  gt         4 lt  td gt                                       lt td class  tbDataDiseases  gt         5 lt  td gt                       lt  tr gt                                   lt  tbody gt                               lt  table gt                           lt  div gt    lt  div gt    CSS         box-sizing  border-box      container   width 1000px     scrollTable       overflow  scroll    overflow-x  hidden      height  100px     table  margin  0px important  width 983px important  border-collapse  collapse            Styles of the th and td         Id     tbDataId      width 5                             tbDataData        width 170px        width  15                   tbDataName      width  15                     tbDataDiseases      width 10

[css] How to make fixed header table inside scrollable div?

The answer is

Examples related to css

Examples related to html

Examples related to css-position

Tags