Twitter Bootstrap scrollable table rows and fixed header

Question

Does anyone know how to make a table with a fixed header row and scrollable body rows  I m using twitter bootstrap if that matters    This is an example of what I m trying to create   http   www siteexperts com tips html ts04 page1 asp  All the examples I ve seen break it into two separate tables  Was wondering if anyone has a more elegant solution    Twitter bootstrap also automatically adjusts the column sizes based on content so that s another reason I d like to keep it in one table

User · Answer

Here is a jQuery plugin that does exactly that: http://fixedheadertable.com/

Usage:

$('selector').fixedHeaderTable({ fixedColumn: 1 });

Set the fixedColumn option if you want any number of columns to be also fixed for horizontal scrolling.

EDIT: This example http://www.datatables.net/examples/basic_init/scroll_y.html is much better in my opinion, although with DataTables you'll need to get a better understanding of how it works in general.

EDIT2: For Bootstrap to work with DataTables you need to follow the instructions here: http://datatables.net/blog/Twitter_Bootstrap_2 (I have tested this and it works)- For Bootstrap 3 there's a discussion here: http://datatables.net/forums/discussion/comment/53462 - (I haven't tested this)

User · Answer

lt table class  table table-striped table-condensed table-hover rsk-tbl vScrollTHead  gt               lt thead gt               lt tr gt                   lt th gt Risk Element lt  th gt                   lt th gt Description lt  th gt                   lt th gt Risk Value lt  th gt                   lt th gt  amp nbsp  lt  th gt               lt  tr gt               lt  thead gt           lt  table gt   lt div class  vScrollTable  gt               lt table class  table table-striped table-condensed table-hover rsk-tbl vScrollTBody  gt                   lt tbody gt                   lt tr class    gt                       lt td gt JEWELLERY lt  td gt                       lt td gt Jewellery business lt  td gt                    lt  tr gt  lt tr class    gt                       lt td gt NGO lt  td gt                       lt td gt none-governmental organizations lt  td gt                       lt  tr gt                   lt  tbody gt               lt  table gt           lt  div gt        vScrollTBody    height 15px      vScrollTHead     height 15px      vScrollTable    height 100px    overflow-y scroll      having two tables for head and body worked for me

User · Answer

Interesting question  I tried doing this by just doing a fixed position row  but this way seems to be a much better one  Source at bottom   css  thead   display block  background  green  margin 0px  cell-spacing 0px  left 0px    tbody   display block  overflow auto  height 100px    th   height 50px  width 80px    td   height 50px  width 80px  background blue  margin 0px  cell-spacing 0px     html   lt table gt       lt thead gt           lt tr gt  lt th gt hey lt  th gt  lt th gt ho lt  th gt  lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt  lt td gt test lt  td gt  lt td gt test lt  td gt  lt  tr gt           lt tr gt  lt td gt test lt  td gt  lt td gt test lt  td gt  lt  tr gt           lt tr gt  lt td gt test lt  td gt  lt td gt test lt  td gt  lt  tr gt   lt  tbody gt      http   www imaputz com cssStuff bigFourVersion html

User · Answer

Just stack two bootstrap tables  one for columns  the other for content  No plugins  just pure bootstrap  and that ain t no bs  haha       lt table id  tableHeader  class  table  style  table-layout fixed  gt           lt thead gt               lt tr gt                   lt th gt Col1 lt  th gt                                   lt  tr gt           lt  thead gt     lt  table gt     lt div style  overflow-y auto   gt       lt table id  tableData  class  table table-condensed  style  table-layout fixed  gt           lt tbody gt               lt tr gt                   lt td gt data lt  td gt                                   lt  tr gt           lt  tbody gt       lt  table gt    lt  div gt    Demo JSFiddle  The content table div needs overflow-y auto  for vertical scroll bars  Had to use table-layout fixed  otherwise  columns did not line up  Also  had to put the whole thing inside a bootstrap panel to eliminate space between the tables   Have not tested with custom column widths  but provided you keep the widths consistent between the tables  it should work             ADD THIS JS FUNCTION TO MATCH UP COL WIDTHS       function                 copy width of header cells to match width of cells with data           so they line up properly         var tdHeader   document getElementById  tableHeader   rows 0  cells          var tdData   document getElementById  tableData   rows 0  cells           for  var i   0  i  lt  tdData length  i                tdHeader i  style width   tdData i  offsetWidth    px

[jquery] Twitter Bootstrap scrollable table rows and fixed header

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap