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.
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.
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.
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).
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With