12

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.

minty
  • 22,235
  • 40
  • 89
  • 106
  • You are aware that you can just look at the page source code in your browser and it will tell you, how they do this, don't you? – Mecki Sep 25 '08 at 14:38
  • 1
    Although I could "look beneath the Kimono" I asked the questing to have the answer explained. – minty Sep 25 '08 at 14:45

7 Answers7

8

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

 th {resize:horizontal; overflow:auto;}
user4723924
  • 81
  • 1
  • 1
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 ;)

Alexandre Victoor
  • 3,104
  • 2
  • 27
  • 27
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.

Chris MacDonald
  • 5,975
  • 4
  • 34
  • 35
3

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.
David Basarab
  • 72,212
  • 42
  • 129
  • 156
3

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});
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • I don't know why this wasn't set as the chosen answer, or why it wasn't voted up more, but this is really useful. Thanks! – Kenn Cal Jul 24 '13 at 07:53
  • 1
    Although this grid has adjustable column widths it doesn't answer the question as to how to implement such functionality in a custom table. – Vincent Jun 11 '14 at 16:03
  • 2
    Flexgrid appears to be very unmaintained at this point. The website is down, the github hasn't been updated since 2014, etc. – Jesse W at Z - Given up on SE Mar 07 '16 at 23:31
1

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.

Adam Ness
  • 6,224
  • 4
  • 27
  • 39
1

Applying resize:horizontal to <th> did not work with my FF58. Instead, I created a <div> in each of them and made that resizable:

.mytable th div{
    resize:horizontal;
    overflow: auto;
}
jkdev
  • 11,360
  • 15
  • 54
  • 77
Ataman Semyonov
  • 11
  • 1