Table scroll with HTML and CSS

Question

I have a table like that which i fill with a data    lt table id  products-table   style  overflow-y scroll   gt       lt thead gt           lt tr gt               lt th gt Product  Parent Product  lt  th gt                lt th gt Associated Sites lt  th gt               lt th gt Actions lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           for  int i   0  i  lt  Model Count    i                        lt tr gt               lt td gt                   lt a href  Edit  gt  lt strong gt  Model ElementAt i  Name lt  strong gt  lt  a gt  lt br   gt               lt  td gt               lt td gt                   lt span class  lesser  gt  lt  span gt               lt  td gt               lt td gt  Html ActionLink  Edit Product    Edit    Products   lt br   gt                   Html ActionLink  Associate Site    Associate    Products                lt  td gt            lt  tr gt                     lt tr gt   lt  tbody gt   lt  table gt    and CSS like that        products-table        width  200px      height  400px      overflow scroll      but scroll doesn t work  I want to fix the height of the table and if it exceeds  then work with scrollbar

User · Accepted Answer

Table with Fixed Header   x000D   x000D   lt table cellspacing  0  cellpadding  0  border  0  width  325  gt  x000D     lt tr gt  x000D       lt td gt  x000D          lt table cellspacing  0  cellpadding  1  border  1  width  300   gt  x000D            lt tr style  color white background-color grey  gt  x000D               lt th gt Header 1 lt  th gt  x000D               lt th gt Header 2 lt  th gt  x000D            lt  tr gt  x000D          lt  table gt  x000D       lt  td gt  x000D     lt  tr gt  x000D     lt tr gt  x000D       lt td gt  x000D          lt div style  width 320px  height 80px  overflow auto   gt  x000D            lt table cellspacing  0  cellpadding  1  border  1  width  300   gt  x000D              lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D              lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D                 lt tr gt  x000D                lt td gt new item lt  td gt  x000D                lt td gt new item lt  td gt  x000D              lt  tr gt  x000D            lt  table gt    x000D          lt  div gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Result    This is working in all browser   Demo jsfiddle http   jsfiddle net nyCKE 6302

User · Answer

This work for me  Demo  jsfiddle    function          Fixed Header            function Fixed Header             User Table thead   css   position    absolute             User Table tbody tr eq  2   td   each function index e               User Table thead tr th eq    index       css   width      this  outerWidth     px                  var Header Height       User Table thead   outerHeight            User Table thead   css   margin-top     -  Header Height  px             User Table   css   margin-top    Header Height  px

User · Answer

lt div style  overflow auto  gt       lt table id  table2  gt  lt  table gt   lt  div gt    Try this code for overflow table it will work only on div tag

User · Answer

For those wondering how to implement Garry s solution with more than one header this is it    x000D   x000D   wrapper   x000D    width  235px  x000D    x000D   x000D  table   x000D    border  1px solid black  x000D    width  100   x000D    x000D   x000D  th  x000D  td   x000D    width  100px  x000D    border  1px solid black  x000D    x000D   x000D  thead gt tr   x000D    position  relative  x000D    display  block  x000D    x000D   x000D  tbody   x000D    display  block  x000D    height  80px  x000D    overflow  auto  x000D    x000D   lt div id  wrapper  gt  x000D     lt table gt  x000D       lt thead gt  x000D         lt tr gt  x000D           lt th gt column1 lt  th gt  x000D           lt th gt column2 lt  th gt  x000D         lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D         lt tr gt  x000D           lt td gt row1 lt  td gt  x000D           lt td gt row1 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt row2 lt  td gt  x000D           lt td gt row2 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt row3 lt  td gt  x000D           lt td gt row3 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt row4 lt  td gt  x000D           lt td gt row4 lt  td gt  x000D         lt  tr gt  x000D       lt  tbody gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Late answer  another idea  but very short    put the contents of header cells into div fix the header contents  see CSS   table    margin-top   20px  display  inline-block  overflow  auto    th div   margin-top  -20px  position  absolute      Note that it is possible to display table as inline-block due to anonymous table objects       missing   in HTML table tree structure  elements must be assumed in order for the table model to work  Any table element will automatically generate necessary anonymous table objects around itself     x000D   x000D     scrolltable rules    x000D  table    margin-top   20px  display  inline-block  overflow  auto    x000D  th div   margin-top  -20px  position  absolute    x000D   x000D     design    x000D  table   border-collapse  collapse    x000D  tr nth-child even    background   EEE    x000D   lt table style  height  150px  gt  x000D     lt tr gt   lt th gt  lt div gt first lt  div gt   lt th gt  lt div gt second lt  div gt  x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo foo foo foo foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar bar bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D     lt tr gt   lt td gt foo  lt td gt bar x000D   lt  table gt  x000D   x000D   x000D

User · Answer

For whatever it s worth now  here is yet another solution     create two divs within a display  inline-block in the first div  put a table with only the header  header table tabhead  in the 2nd div  put a table with header and data  data table   full table tabfull  use JavaScript  use setTimeout      gt             to execute code after render   after filling the table with results from fetch measure the width of each th in the data table  using clientWidth   apply the same width to the counterpart in the header table set visibility of the header of the data table to hidden and set the margin top to -1   height of data table thead pixels   With a few tweaks  this is the method to use  for brevity   simplicity  I used d3js  the same operations can be done using plain DOM     setTimeout      gt       pass one cycle   d3 select   tabfull        style  margin-top    -1   d3 select   tabscroll   select  thead   node   getBoundingClientRect   height     px        select  thead          style  visibility    hidden      let widths        really rely on COMPUTED values   d3 select   tabfull   select  thead   selectAll  th        each  n  i  nd    gt  widths push nd i  clientWidth      d3 select   tabhead   select  thead   selectAll  th        each  n  i  nd    gt  d3 select nd i              style  padding-right   0             style  padding-left   0             style  width   widths i   px          Waiting on render cycle has the advantage of using the browser layout engine thoughout the process - for any type of header  it s not bound to special condition or cell content lengths being somehow similar  It also adjusts correctly for visible scrollbars  like on Windows   I ve put up a codepen with a full example here  https   codepen io sebredhh pen QmJvKy

User · Answer

Works only in Chrome but it can be adapted to other modern browsers  Table falls back to common table with scroll bar in other brws  Uses CSS3 FLEX property   http   jsfiddle net 4SUP8 1    lt table border  1px  class  flexy  gt       lt caption gt Lista Sumnjivih vozila  lt  caption gt       lt thead gt           lt tr gt               lt td gt Opis Sumnje lt  td gt           lt td gt Registarski lt br gt broj vozila lt  td gt           lt td gt Datum lt br gt Vreme lt  td gt           lt td gt Brzina lt br gt  km h  lt  td gt           lt td gt Lokacija lt  td gt           lt td gt Status lt  td gt           lt td gt Akcija lt  td gt           lt  tr gt       lt  thead gt       lt tbody gt            lt tr gt           lt td gt Osumnjicen tranzit lt  td gt           lt td gt NS182TP lt  td gt           lt td gt 23-03-2014 20 48 08 lt  td gt           lt td gt 11 3 lt  td gt           lt td gt Raskrsnica kod pumpe lt br gt  lt  td gt           lt td gt  lt  td gt           lt td gt Prikaz lt  td gt           lt  tr gt           lt tr gt            lt tr gt           lt td gt Osumnjicen tranzit lt  td gt           lt td gt NS182TP lt  td gt           lt td gt 23-03-2014 20 48 08 lt  td gt           lt td gt 11 3 lt  td gt           lt td gt Raskrsnica kod pumpe lt br gt  lt  td gt           lt td gt  lt  td gt           lt td gt Prikaz lt  td gt           lt  tr gt           lt tr gt            lt tr gt           lt td gt Osumnjicen tranzit lt  td gt           lt td gt NS182TP lt  td gt           lt td gt 23-03-2014 20 48 08 lt  td gt           lt td gt 11 3 lt  td gt           lt td gt Raskrsnica kod pumpe lt br gt  lt  td gt           lt td gt  lt  td gt           lt td gt Prikaz lt  td gt           lt  tr gt           lt tr gt             lt tr gt           lt td gt Osumnjicen tranzit lt  td gt           lt td gt NS182TP lt  td gt           lt td gt 23-03-2014 20 48 08 lt  td gt           lt td gt 11 3 lt  td gt           lt td gt Raskrsnica kod pumpe lt br gt  lt  td gt           lt td gt  lt  td gt           lt td gt Prikaz lt  td gt           lt  tr gt        lt  tbody gt   lt  table gt    Style  CSS 3    caption       display  block      line-height  3em      width  100       -webkit-align-items  stretch      border  1px solid  eee             flexy               display  block              width  90               border  1px solid  eee              max-height  320px              overflow  auto                      flexy thead               display  -webkit-flex              -webkit-flex-flow  row                      flexy thead tr               padding-right  15px              display  -webkit-flex              width  100               -webkit-align-items  stretch                      flexy tbody               display  -webkit-flex              height  100px              overflow  auto              -webkit-flex-flow  row wrap                     flexy tbody tr              display  -webkit-flex              width  100                       flexy tr td               width  15

User · Answer

x000D   x000D     outer   x000D      overflow-y  auto  x000D      height  300px  x000D      x000D   x000D     outer   x000D      width  100   x000D      -layout  fixed  x000D      x000D   x000D     outer th   x000D      text-align  left  x000D      top  0  x000D      position  sticky  x000D      background-color  white  x000D      x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  ie edge  gt  x000D       lt title gt MYCRUD lt  title gt  x000D       lt link rel  stylesheet  href  https   use fontawesome com releases v5 7 0 css all css  integrity  sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S oqd12jhcu A56Ebc1zFSJ  crossorigin  anonymous  gt  x000D       lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  integrity  sha384-ggOyR0iXCbMQv3Xipma34MD dH 1fQ784 j6cY iJTQUOhcWr7x9JvoRxT2MZw1T  crossorigin  anonymous  gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container-fluid col-md-11  gt  x000D     lt div class  row  gt  x000D   x000D       lt div class  col-lg-12  gt  x000D   x000D      x000D           lt div class  card-body  gt  x000D             lt div class  outer  gt  x000D   x000D               lt table class  table table-hover bg-light  gt  x000D                 lt thead gt  x000D                   lt tr gt  x000D                     lt th scope  col  gt ID lt  th gt  x000D                     lt th scope  col  gt Marca lt  th gt  x000D                     lt th scope  col  gt Editar lt  th gt  x000D                     lt th scope  col  gt Eliminar lt  th gt  x000D                   lt  tr gt  x000D                 lt  thead gt  x000D                 lt tbody gt  x000D   x000D                   x000D                     lt tr gt  x000D                       lt td gt 4 lt  td gt  x000D                       lt td gt Toyota lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 3 lt  td gt  x000D                       lt td gt Honda  lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 5 lt  td gt  x000D                       lt td gt Myo lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 6 lt  td gt  x000D                       lt td gt Acer lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 7 lt  td gt  x000D                       lt td gt HP lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 8 lt  td gt  x000D                       lt td gt DELL lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                     lt tr gt  x000D                       lt td gt 9 lt  td gt  x000D                       lt td gt LOGITECH lt  td gt  x000D                       lt td gt   lt a class  btn btn-success  href     gt  x000D                           lt i class  fa fa-edit  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                       lt td gt   lt a class  btn btn-danger  href     gt  x000D                           lt i class  fa fa-trash  gt  lt  i gt  x000D                         lt  a gt  x000D                       lt  td gt  x000D                     lt  tr gt  x000D   x000D                                 lt  tbody gt  x000D               lt  table gt  x000D             lt  div gt  x000D   x000D           lt  div gt  x000D   x000D        x000D   x000D   x000D   x000D   x000D       lt  div gt  x000D   x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Adds a fading gradient to an overflowing HTML table element to better indicate there is more content to be scrolled    Table with fixed header Overflow scroll gradient Custom scrollbar   See the live example below    x000D   x000D      scrolltable   html   lt table id  cell  gt  lt tbody gt  lt  tbody gt  lt  table gt     x000D      cell   append   lt thead gt  lt tr gt  lt th gt  lt div gt First col lt  div gt  lt  th gt  lt th gt  lt div gt Second col lt  div gt  lt  th gt  lt  tr gt  lt  thead gt     x000D   x000D  for  var i   0  i  lt  40  i      x000D        scrolltable  gt  table  gt  tbody   append   lt tr gt  lt td gt      foo      lt  td gt  lt td gt      bar      lt  td gt  lt  tr gt     x000D    x000D     Table with fixed header    x000D   x000D  table  x000D  thead   x000D    width  100   x000D    text-align  left  x000D    x000D   x000D   scrolltable   x000D    margin-top  50px  x000D    height  120px  x000D    overflow  auto  x000D    width  200px  x000D    x000D   x000D   scrolltable table   x000D    border-collapse  collapse  x000D    x000D   x000D   scrolltable tr nth-child even    x000D    background   EEE  x000D    x000D   x000D   scrolltable th div   x000D    position  absolute  x000D    margin-top  -30px  x000D    x000D   x000D   x000D     Custom scrollbar    x000D   x000D    -webkit-scrollbar   x000D    width  8px  x000D    x000D   x000D    -webkit-scrollbar-track   x000D    box-shadow  inset 0 0 6px rgba 0  0  0  0 3   x000D    border-radius  10px  x000D    x000D   x000D    -webkit-scrollbar-thumb   x000D    border-radius  10px  x000D    box-shadow  inset 0 0 6px rgba 0  0  0  0 5   x000D    x000D   x000D   x000D     Overflow scroll gradient    x000D   x000D   overflow-scroll-gradient   x000D    position  relative  x000D    x000D   x000D   overflow-scroll-gradient  after   x000D    content      x000D    position  absolute  x000D    bottom  0  x000D    width  240px  x000D    height  25px  x000D    background  linear-gradient  rgba 255  255  255  0 001   white   x000D    pointer-events  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  overflow-scroll-gradient  gt  x000D     lt div id  scrolltable  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[html] Table scroll with HTML and CSS

Examples related to html

Examples related to css

Examples related to html-table