Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a resizable table in html with scrollbars using jQuery?

I want to create a table in HTML which is having resizable columns. I also want scrollbars to table but header of table should remain fixed while scrolling.

Please help.

like image 312
surajR Avatar asked May 10 '12 05:05

surajR


People also ask

How do I make a scrollbar in a table?

Overflow property is used to create scrollbar in table. Use display: block; property to display the block level element. Since changing the display property of tbody, we should change the property for thead element as well to prevent from breaking the table layout.

How do you make a table column resizable?

In order to allow user to resize col , we have to handle three events: mousedown on the resizer: Track the current position of mouse. mousemove on document : Calculate how far the mouse has been moved, and adjust the width of the column. mouseup on document : Remove the event handlers of document.

How do I make my table body scrollable?

If you want tbody to show a scrollbar, set its display: block; . Set display: table; for the tr so that it keeps the behavior of a table. To evenly spread the cells, use table-layout: fixed; . Anyhow, to set a scrollbar, a display reset is needed to get rid of the table-layout (which will never show scrollbar).


1 Answers

www.tablefixedheader.com

Just create a basic valid HTML like the example below. But note that the hierarchy must be :

 - table > thead > tr > th
 - table > tbody > tr > td

Example for re-sizable cols

    $('#4').fixheadertable({ 
    caption     : 'My employees', 
    colratio    : [50, 150, 150, 150, 220, 150], 
    height      : 200, 
    width       : 800, 
    zebra       : true,
    resizeCol   : true,
    minColWidth : 50 
});
like image 82
Milindu Sanoj Kumarage Avatar answered Oct 08 '22 17:10

Milindu Sanoj Kumarage