0

I got this example below, I want to create a scrolling bar only for the table's body. Indeed it's working, but I'm using Pixels instead of Percentage right here scrolify($('#tblNeedsScrolling'),700);. and limit the table inside of the green frame.

Can you help me?

Thanks in advance.

function scrolify(tblAsJQueryObject, height){
        var oTbl = tblAsJQueryObject;

        // for very large tables you can remove the four lines below
        // and wrap the table with <div> in the mark-up and assign
        // height and overflow property  
        var oTblDiv = $("<div/>");
        oTblDiv.css('height', height);
        oTblDiv.css('overflow','scroll');               
        oTbl.wrap(oTblDiv);

        // save original width
        oTbl.attr("data-item-original-width", oTbl.width());
        oTbl.find('thead tr td').each(function(){
            $(this).attr("data-item-original-width",$(this).width());
        }); 
        oTbl.find('tbody tr:eq(0) td').each(function(){
            $(this).attr("data-item-original-width",$(this).width());
        });                 


        // clone the original table
        var newTbl = oTbl.clone();

        // remove table header from original table
        oTbl.find('thead tr').remove();                 
        // remove table body from new table
        newTbl.find('tbody tr').remove();   

        oTbl.parent().parent().prepend(newTbl);
        newTbl.wrap("<div/>");

        // replace ORIGINAL COLUMN width                
        newTbl.width(newTbl.attr('data-item-original-width'));
        newTbl.find('thead tr td').each(function(){
            $(this).width($(this).attr("data-item-original-width"));
        });     
        oTbl.width(oTbl.attr('data-item-original-width'));      
        oTbl.find('tbody tr:eq(0) td').each(function(){
            $(this).width($(this).attr("data-item-original-width"));
        });                 
    }

    $(document).ready(function(){
        scrolify($('#tblNeedsScrolling'),700); // 700px is height <-- I would like to change it to percentage
    });
      
    $("body").css("overflow", "hidden");
<head>
    <script   
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    </script>
</head>

<body>
  <div style="height:93%;width:100%x;border:6px green solid;">
        <table border="1" width="100%" id="tblNeedsScrolling">
            <thead>
                <tr><th>Header 1</th><th>Header 2</th></tr>
            </thead>
            <tbody>
                <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
                <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>  
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
                <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
                <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>  
                <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>
                <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr>           
                <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr>
                <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr>
                <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr>
                <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr>  
            </tbody>
        </table>
    </div>

<script src="http://static.jsbin.com/js/render/edit.js?3.26.2"></script>
<script>jsbinShowEdit && jsbinShowEdit({"static":"http://static.jsbin.com","root":"http://jsbin.com"});</script>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1656750-34', 'jsbin.com');
ga('require', 'linkid', 'linkid.js');
ga('require', 'displayfeatures');
ga('send', 'pageview');

</script>

</body>
Calne Souza
  • 3
  • 3
  • 5
    Did you tried css property "overflow: scroll;" ? I think you are looking for this http://jsfiddle.net/hashem/CrSpu/555/ – Sagar May 21 '15 at 13:08
  • @Sagar Can you help with it: http://liveweave.com/VOujGT, I would like to make it divide the space between the columns equally. – Calne Souza May 21 '15 at 13:18

1 Answers1

0

@Sagar's suggestion was right to add "overflow: scroll;" to create the scrolling bar you want.

Sorry for my previous Bootstrap based answer, as it does not work the way you need. If I understand your question correctly, I think you are better off looking at this stackoverflow post. Good luck!

Community
  • 1
  • 1
Dan Ward
  • 182
  • 3
  • 10
  • I just want o make the lines be align by the widest (the header or the row) http://liveweave.com/K3bSIU, the scrolling is working – Calne Souza May 21 '15 at 14:02
  • Ah, ok. If you do decide to use bootstrap, you can achieve that and a nice layout by just adding `class="table"` to the `` tag. Good luck! :D
     – Dan Ward May 21 '15 at 14:08
  • I'm sorry for being kinda rushy – Calne Souza May 21 '15 at 14:09
  • I've used bootstrap, but that disabled the scrolling, how can I use both? – Calne Souza May 21 '15 at 14:16
  • I was able to add scrolling to your table by removing your overflows in your css, then placing the `
    ` inside of a `
    `. [code link](http://liveweave.com/TrpWZd) and [documentation link](http://getbootstrap.com/css/#tables-responsive)     – Dan Ward May 21 '15 at 17:43