Twitter bootstrap scrollable table

Question

I would like to have a table on my website  The problem is that this table will have about 400 lines  How can I limit the table s height  and apply scrollbar to it  This is my code    lt div class  span3  gt     lt h2 gt Achievements left lt  h2 gt   lt table class  table table-striped  gt     lt thead gt       lt tr gt         lt th gt   lt  th gt         lt th gt Name lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt       lt tr gt         lt td gt 1 lt  td gt         lt td gt Something lt  td gt       lt  tr gt       lt tr gt         lt td gt 2 lt  td gt         lt td gt Something lt  td gt       lt  tr gt       lt tr gt         lt td gt 3 lt  td gt         lt td gt Something lt  td gt       lt  tr gt       lt tr gt         lt td gt 4 lt  td gt         lt td gt Something lt  td gt       lt  tr gt       lt tr gt         lt td gt 5 lt  td gt         lt td gt Something lt  td gt       lt  tr gt       lt tr gt         lt td gt 6 lt  td gt         lt td gt Something lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt      lt p gt  lt a class  btn  href     gt View details  amp raquo  lt  a gt  lt  p gt   lt  div gt    I tried to apply max-height and fixed height to table  but it doesn t work

User · Answer

Don t need the wrap it in a div     CSS   tr   width  100   display  inline-table  table-layout  fixed     table   height 300px                   lt -- Select the height of the table  display  -moz-groupbox        Firefox Bad Effect   tbody    overflow-y  scroll          height  200px                  lt -- Select the height of the body   width  100     position  absolute      Bootply   http   www bootply com AgI8LpDugl

User · Answer

I had the same issue and used a combination of the above solutions  and added a twist of my own   Note that I had to specify column widths to keep them consistent between header and body   In my solution  the header and footer stay fixed while the body scrolls    lt div class  table-responsive  gt       lt table class  table table-striped table-hover table-condensed  gt           lt thead gt               lt tr gt                   lt th width  25   gt First Name lt  th gt                   lt th width  13   gt Last Name lt  th gt                   lt th width  25   class  text-center  gt Address lt  th gt                   lt th width  25   class  text-center  gt City lt  th gt                   lt th width  4   class  text-center  gt State lt  th gt                   lt th width  8   class  text-center  gt Zip lt  th gt               lt  tr gt           lt  thead gt       lt  table gt       lt div class  bodycontainer scrollable  gt           lt table class  table table-hover table-striped table-condensed table-scrollable  gt               lt tbody gt                   lt  -- add rows here  specifying same widths as in header  at least on one row -- gt               lt  tbody gt           lt  table gt       lt  div gt       lt table class  table table-hover table-striped table-condensed  gt           lt tfoot gt               lt  -- add your footer here    -- gt           lt  tfoot gt       lt  table gt   lt  div gt    And then just applied the following CSS    bodycontainer   max-height  450px  width  100   margin  0  overflow-y  auto     table-scrollable   margin  0  padding  0      I hope this helps someone else

User · Answer

I recently had a similar problem and ended up fixing it using a mixture of different solutions   The first and most simple one was to use two tables  one for the headers and one for the body  This works but the headers and the body columns are not aligned  And  since I wanted to use the auto-size that comes with twitter bootstrap tables I ended up creating a Javascript function that changes the headers when  the body is rendered  the windows is resized  the data in the column changes  etc   Here is some of the code I used            lt table class  table table-striped table-hover  style  margin-bottom  0px   gt           lt thead gt               lt tr gt                   lt th data-sort  id  gt Header 1 lt  i gt  lt  th gt                   lt th data-sort  guide  gt Header 2 lt  th gt                   lt th data-sort  origin  gt Header 3 lt  th gt                   lt th data-sort  supplier  gt Header 4 lt  th gt               lt  tr gt           lt  thead gt       lt  table gt       lt div class  bodycontainer scrollable  gt           lt table class  table table-hover table-striped table-scrollable  gt               lt tbody id  rows  gt  lt  tbody gt           lt  table gt       lt  div gt    The headers and the body are divided in two separate tables  One of them is inside a DIV with the necessary style to generate the vertical scrollbars  Here is the CSS I used    bodycontainer       height  200px   width  100     margin  0      table-scrollable     margin  0px    padding  0px      I commented the height here because I a wanted the table to reach the bottom of the page  whatever the page height might be   The  data-sort attributes I used in the headers are also used in every td  This way I could get the width and the padding of every td and the width of the row  Using the data-sort attributes I set using CSS the padding and width of each header accordingly and of the header row which is always bigger since it doesn  t have a scrollbar  Here is the function using coffeescript   fixHeaders    gt    for header  i in  headers     tdpadding   parseInt     td data-sort   header     css  padding        tdwidth   parseInt     td data-sort   header     css  width            th data-sort   header     css  padding   tdpadding          th data-sort   header     css  width   tdwidth      if  i 1      headers length       trwidth       td data-sort   header     parent   css  width             th data-sort   header     parent   parent   parent   css  width   trwidth             bodycontainer   css  height   window innerHeight -     html   outerHeight   -     bodycontainer   outerHeight       unless  collection length    0   Here I assume that you have an array of the headers called  headers   It is not pretty but it works  Hope it helps someone

User · Answer

Figured I would post on here since I could not get any of the above to work with Bootstrap 4  I found this online and worked perfectly for me     table       width  100       display  block      border solid black 1px     thead       display  inline-block      width  100       height  20px     tbody       height  200px      display  inline-block      width  100       overflow  auto     th  td       width  100px      border solid 1px black      text-align center      I have also attached the working jsfindle   https   jsfiddle net jgngg28t   Hope it helps someone else

User · Answer

I added  table-responsive to the table and it worked  From the docs  Create responsive tables by wrapping any  table with  table-responsive -sm -md -lg -xl   making the table scroll horizontally at each max-width breakpoint of up to  but not including  576px  768px  992px  and 1120px  respectively

User · Answer

Re Jonathan Wood s suggestion   I don t have the option of wrapping tables with a new div as i m using a CMS   Using JQuery here s what i did       table    wrap    lt div class  table-overflow  gt  lt  div gt        This wraps table elements with a new div with the class  table-overflow    You can then simply add the following definition in your css file    table-overflow   overflow  auto

User · Answer

All above solutions make table header scroll too    If you want to scroll tbody only then apply this   tbody       height  100px  important      overflow  scroll      display block

User · Answer

put the table inside the div to make scrollable table vertically  change overflow-yto overflow-x to make table scrollable horizontally  just overflow to make table scrollable both horizontal and vertical    lt div style  overflow-y  scroll   gt        lt table gt               lt  table gt   lt  div gt

User · Answer

Table elements don t appear to support this directly  Place the table in a div and set the height of the div and set overflow  auto

User · Answer

This example shows how to have sticky headers when using Bootstrap 4 table styling   x000D   x000D   table-scrollable          set the height to enable overflow of the table        max-height  200px           overflow-x  auto      overflow-y  auto      scrollbar-width  thin      table-scrollable thead th       border  none      table-scrollable thead th          Set header to stick to the top of the container         position  sticky       top  0px              This is needed otherwise the sticky header will be transparent             background-color  white          Because bootstrap adds  border-collapse  collapse  to the        table  the header boarders aren t sticky         So  we need to make some adjustments to cover up the actual        header borders and created fake borders instead             margin-top  -1px      margin-bottom  -1px          This is our fake border  see above comment         box-shadow  inset 0 1px 0  dee2e6                  inset 0 -1px 0  dee2e6    x000D   lt  -- CSS -- gt   lt link rel  stylesheet  href  https   cdn jsdelivr net npm bootstrap 4 5 3 dist css bootstrap min css  integrity  sha384-TX8t27EcRE3e ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2  crossorigin  anonymous  gt    lt  -- jQuery and JS bundle w  Popper js -- gt   lt script src  https   code jquery com jquery-3 5 1 slim min js  integrity  sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj  crossorigin  anonymous  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm bootstrap 4 5 3 dist js bootstrap bundle min js  integrity  sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ JpcUGGOn Y7RsweNrtN tE3MoK7ZeZDyx  crossorigin  anonymous  gt  lt  script gt     lt div class  dashboard-container card  gt     lt div class  card-body  gt       lt div class  table-scrollable  gt         lt table class  table table-hover table-sortable  gt             lt thead gt                 lt tr gt                     lt th data-sort-type  text  gt Course lt  th gt                     lt th data-sort-type  numeric  gt In Progress lt  th gt                     lt th data-sort-type  numeric  gt Not Started lt  th gt                     lt th data-sort-type  numeric  gt Passed lt  th gt                     lt th data-sort-type  numeric  gt Failed lt  th gt                 lt  tr gt             lt  thead gt             lt tbody gt               lt tr gt                 lt td gt How to be good at stuff lt  td gt                 lt td gt 0 lt  td gt                 lt td gt 1000 lt  td gt                 lt td gt 0 lt  td gt                 lt td gt 0 lt  td gt               lt  tr gt               lt tr gt                 lt td gt Quantum physics for artists lt  td gt                 lt td gt 200 lt  td gt                 lt td gt 6 lt  td gt                 lt td gt 66 lt  td gt                 lt td gt 66 lt  td gt               lt  tr gt               lt tr gt                 lt td gt The best way to skin a cat lt  td gt                 lt td gt 34 lt  td gt                 lt td gt 16 lt  td gt                 lt td gt 200 lt  td gt                 lt td gt 7 lt  td gt               lt  tr gt               lt tr gt                 lt td gt Human cookbook lt  td gt                 lt td gt 4 lt  td gt                 lt td gt 7 lt  td gt                 lt td gt 4 lt  td gt                 lt td gt 50 lt  td gt               lt  tr gt               lt tr gt                 lt td gt Aristocracy rules lt  td gt                 lt td gt 100 lt  td gt                 lt td gt 3 lt  td gt                 lt td gt 6 lt  td gt                 lt td gt 18 lt  td gt               lt  tr gt             lt  tbody gt         lt  table gt       lt  div gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

This is may not a solution for large row count  I simply use duplication table trick to get the thing done for small row count table while it can keep flex column width  you can try this fiddle     The fixed width column is the method I use for large row count table which require only the header row duplication   Sample Code         lt div style  height 30px overflow hidden margin-right 15px   gt      lt table class  table  gt          lt thead gt              lt tr gt                   lt th gt Col 1 lt  th gt                   lt th gt Col 2 lt  th gt                   lt th gt Col 3 lt  th gt               lt  tr gt           lt  thead gt           lt tbody gt               lt tr gt                   lt td gt Cel 1 1 lt  td gt                   lt td gt Cel 1 2 lt  td gt                   lt td gt Cel 1 3 lt  td gt               lt  tr gt               lt tr gt                   lt td gt Cel 2 1 lt  td gt                   lt td gt Cel 2 2 lt  td gt                   lt td gt Cel 2 3 lt  td gt               lt  tr gt               lt tr gt                   lt td gt Cel 3 1 lt  td gt                   lt td gt Cel 3 2 lt  td gt                   lt td gt Cel 3 3 lt  td gt               lt  tr gt             lt  tbody gt       lt  table gt   lt  div gt   lt div style  height 100px overflow-y scroll    gt       lt table class  table  gt           lt thead gt            lt  thead gt           lt tbody gt               lt tr gt                   lt td gt Cel 1 1 lt  td gt                   lt td gt Cel 1 2 lt  td gt                   lt td gt Cel 1 3 lt  td gt               lt  tr gt               lt tr gt                   lt td gt Cel 2 1 lt  td gt                   lt td gt Cel 2 2 lt  td gt                   lt td gt Cel 2 3 lt  td gt               lt  tr gt               lt tr gt                   lt td gt Cel 3 1 lt  td gt                   lt td gt Cel 3 2 lt  td gt                   lt td gt Cel 3 3 lt  td gt               lt  tr gt                lt tr style  color white  gt                   lt th gt Col 1 lt  th gt                   lt th gt Col 2 lt  th gt                   lt th gt Col 3 lt  th gt               lt  tr gt           lt  tbody gt       lt  table gt   lt  div gt

User · Answer

None of these answers worked satisfactorily for me  They either didn t fix the table heading row in place or they required fixed column widths to work  and even then tended to have the heading row and body rows misaligned in various browsers   I recommend biting the bullet and using a proper grid control like jsGrid or my personal favorite  SlickGrid  It obviously introduces a dependency but if you want your tables to behave like real grids with cross-browser support  this will save you pulling your hair out  It also gives you the option of sorting and resizing columns plus tons of other features if you want them

User · Answer

CSS   achievements-wrapper   height  300px  overflow  auto      HTML   lt div class  span3 achievements-wrapper  gt       lt h2 gt Achievements left lt  h2 gt       lt table class  table table-striped  gt               lt  table gt   lt  div gt

User · Answer

I recently had to do this with bootstrap and angularjs  I created an angularjs directive which solves the problem  you can see a working example and details on this blog post   You use it just by adding a fixed-header attribute to the table tag    lt table class  table table-bordered  fixed-header gt       lt  table gt    If you re not using angularjs you could tweak the directive s javascript and use it directly instead

User · Answer

span3         height  100px  important      overflow  scroll       You ll want to wrap it in it s own div or give that span3 an id of it s own so you don t affect your whole layout   Here s a fiddle  http   jsfiddle net zm6rf

User · Answer

Put the table in a div and give that div the class pre-scrollable

[twitter-bootstrap] Twitter bootstrap scrollable table

Examples related to twitter-bootstrap