HTML table with a fixed header, Resizable Columns and may be smaller than the width of the content

Question

I would like to include a table in my web application with fixed, stylized headers and resizable columns AND, to be able to resize the columns (both when resizing the browser and the table to 100% by resizing the columns) to a level smaller than the content, and the content will be truncated (hidden).

I would also like the body of the table (and not the title) to scroll if it cannot match.

At the moment, I don’t care if it works in every browser, I just need it to work in a webkit-based browser.

I tried many different combinations, including tons of jQuery plugins, displaying the header bits as display: block, and then using jQuery resizing and even CSS3 resizing values ​​without providing all of these functions that I need.

Does anyone know something that supports this, or has code to make this happen?

Answer 1

You can use this jQuery plugin: https://github.com/benjaminleouzon/tablefixedheader

This is the only "fixed header table" plugin without fixing the width and without monitoring the size of the body!

You can easily customize a table with theme files.

Disclaimer: I am the author of the plugin.