How do you create an HTML table with adjustable columns?

Question

I want to know how to create a table where you can adjust the column widths. I have not figured out how to do this. If you know the secret sauce to this technique please let me know.

Answer 1

Add this CSS to make your table's column widths adjustable...

 th {resize:horizontal; overflow:auto;}

Answer 2

There is no simple answer such as "use some foobar html property". This is done with javascript and DOM manipulations.
If you are curious to see an implementation of this feature with Prototype you can take a look at TableKit.
I am sure there are jQuery implementations out there... I like my good old Prototype ;)

Answer 3

I believe it's as simple as capturing a mouse click event at an area at the edge of a cell header, and then dynamically changing the width of the column as the mouse is dragged.

Answer 4

Are you looking for the effect of outlook or there is the <-> that show up to show you to resize the table?

• What I have done for this, is created a div or a cell that is only a couple pixels wide.
• I change the cursor so it is an arrow <->.
• On the click of the use over that div control
• On the click of the use over that div control I create on the fly another 'floating' div that shows where they will eventually position it.
• The movement is hooked up to the mouse move event on JavaScript.
• Once the release the control I then reposition the table cell height or width according to where they moved the new control.

Answer 5

Flexigrid for jQuery seems pretty sweet.

Update: As per @Vincent's comment the use is really simple... see the site for full details, however for the most basic example - include the script then hook the functionality to your table:

$('#myTableID').flexigrid();

or with options:

$('.classOfTables').flexigrid({height:'auto',striped:false});