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

I assume that it would be DHTML (CSS & JavaScript).

Answer 2

JavaScript + Google = the answer

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

The Yahoo UI (YUI) data table widget allows resizing of columns. It's publicly available, but still in Beta, and the YUI library is pretty bulky. Any implementation will have to be in JavaScript/DHTML, because the default HTML tables don't have that kind of capabilities.

Answer 5

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 6

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 7

Flexigrid for jQuery seems pretty sweet.

Answer 8

The way you do it is:

document.designMode='on'

This is how they create adjustable tables and rich text editors in javascript.

Try it yourself, type this in your browser bar.

javascript:void(document.designMode = 'on')