This is to mimic a Table with fixed header at top and a footer.
Different from other options in the internet, this is not automatic layout. You have to build the HTML following the structure above.
This table has rounded corners and the CSS is customized to remove double borders.
Columns width can be px or %, the table-layout is fixed. The table can scroll horizontally and vertically. Fixed the vertical scroll bar not been take in consideration. Now the table will scroll and the header/footer will be aligned correctly.
Also I added a simple way to select a row.
Example: http://jsfiddle.net/0x3333/f0vfpvLm/4/
<div class="table-container"> <-- Header --> <div class="table-container-header"> <table class="table table-bordered"> <thead> <tr> <th>Header 1</th> ... <th>Header N</th> </tr> </thead> </table> </div> <-- Body --> <div class="table-container-body"> <table class="table table-bordered"> <-- You set the columns width here --> <colgroup> <col style="width: XXXpx;"></col> ... <col style="width: XXX%;"></col> </colgroup> <tbody> <tr> <td>Body 1</td> ... <td>Body N</td> </tr> </tbody> </table> </div> <!-- Optional --> <-- Footer --> <div class="table-container-footer"> <table class="table table-striped table-hover table-condensed table-bordered"> <tfoot> <tr> <th>Footer 1</th> ... <th>Footer N</th> </tr> </tfoot> </table> </div> </div>
Hi @0x3333, I'm using code of you for my Table. My table have multi th.
https://www.dropbox.com/s/wmafxbqnmwi0t4w/Screenshot%202015-04-22%2016.41.04.png?dl=0
But the Thead and Tbody are mismatch.
I hope you help me, pls!
Thank you very much!
Demo:http://jsfiddle.net/TaNoBi/av6Lp7t7/