Make TBODY scrollable in Webkit browsers

Question

I\'m aware of this question, but none of the answers work in Safari, Chrome, etc.

The accepted strategy (as demonstrated here) is to set the tbody height and overflo

Answer 1

I developed javascript solution for the above problem
which works only in Firefox 7+ as i have tested only in FF

I came to this thread and found solution pointed by Michael Koper

In this solution three important things are done
1) fix the column width
2) thead > tr display is set to block
3) tbody display is set to block

as others have mentioned there problem to fix the width , i am also in same position;
even i cant fix the width statically

so i thought i will fix the width dynamically ( after table is rendered in browser) and this did the trick :)

following is the solution in javascript which works only in FF
( i have tested only in FF , i dont have access to other browsers )

       function test1(){                
            var tbodys = document.getElementsByTagName("TBODY");
            for(var i=0;i<tbodys.length;i++){
                do_tbodyscroll(tbodys[i]);
            }
        }


      function do_tbodyscroll(_tbody){
            // get the table node 
            var table = _tbody.parentNode;

            // first row of tbody 
            var _fr = _tbody.getElementsByTagName("TR")[0];

            // first row cells .. 
            var _frcells = _fr.cells;

            // Width array , width of each element is stored in this array 
            var widtharray = new Array(_frcells.length);

            for(var i=0;i<_frcells.length;i++){                    
                widtharray[i] = _frcells[i].scrollWidth;
            }                

            // Apply width to first row                  
            for(var i=0;i<_frcells.length;i++){
                _frcells[i].width = widtharray[i];                   
            }                 

            // Get the Last row in Thead ... 
            // COLGROUPS USING COLSPAN NOT YET SUPPORTED

            var thead = table.getElementsByTagName("THEAD")[0];
            var _rows = thead.getElementsByTagName("TR");
            var tableheader = _rows[_rows.length - 1];
            var headercells = tableheader.cells;

            // Apply width to header ..                                
            for(var i=0;i<headercells.length;i++){
                headercells[i].width = widtharray[i];
            }

            // ADD 16 Pixel of scroll bar to last column ..
            headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;

            tableheader.style.display = "block";
            _tbody.style.display = "block";  
        }

This solutions finds out what is the width of column from browser
and set again the same width to columns ( header and first row of tbody )
after the width is set; thead > tr and tbody display is set to block

Hope this solution is useful for all of you ..
if you can extend it to other browsers please reply to this post

Answer 2

If anyone needs it to work in IE quirks mode, here is how I changed and simplified I.G. Pascual's code to work:

.fixed_table{
       overflow: scroll;
       overflow-x: hidden;
       max-height: 300px;
       height: 300px;
       min-height: 50px;
       padding-right:0;
}
#datatable td 
{
       padding:3px;
       text-align: center;
       width: 9%;
       vertical-align: middle;
       background-color: #343435; 
       color: #E0E0E3;
       overflow:hidden;
} 
<div class="head">
    <table>
        <thead>
            <tr>
                <th>Time (GMT)</th>
                <th>Price</th>
            </tr>
        </thead>
    </table>
</div>
<div class="fixed_table">
    <table id="datatable" cellspacing="1" cellpadding="1">
        <tbody></tbody>
    </table>
</div>

Answer 3

Thought I'd throw my solution into the mix - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/.

It takes the same basic route as @Michael Koper's solution but includes a workaround so the table will look correct in IE back to IE6.

I solve the width issue by giving the <table> a table-layout: fixed and explicitly assigning width to cells in each column. Not ideal but it does produce a semantic table that will align cross browser regardless of whether a scrollbar is needed.

Demo: http://codepen.io/tjvantoll/pen/JEKIu

Answer 4

It may be overkill for this question, but YUI still provides possibly the best free cross-browser datatable. It can be used for read-only data as well.

YUI 2 DataTable

YUI 3 DataTable

Click on the examples there to see scrollable samples. Since, I am a newbie to stackoverflow, I can only post these two links.

Answer 5

This is really quite hacky but maybe it will help someone somewhere...

http://jsfiddle.net/yUHCq/1/

It uses columns instead of rows so processing it would essentially be done backwards.

Transitional DOCTYPE added for IE compatibility.

Answer 6

There is an example here that works in IE5+, Firefox and Chrome. However, it uses fixed width columns. http://www.cssplay.co.uk/menu/tablescroll.html