Resize column of html table

Question

I have this simple html table

<table id="tablex">
    <tr>
        <th>col1</th>
        <th>col2</th>
    </tr>
    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

and I tried to make it's columns resizable with colResizable but the problem is when I resize a specific column of the table, the next column to the resizable one is affected because the full width of the table is fixed.

I have tried another solution posted here and other one here but the same problem was present. Is there an other way to make columns resizable using one of jquery libraries or javascript function?

What should happen to the width of the other columns and/or the width of the table when the user resizes the width of a column? — Richard Ev, May 07 '13 at 16:18
@RichardEv it will resize too, like the example [here](http://www.audenaerde.org/example2.html) but the respected result is the other columns dont changes even if the table width change. — Drwhite, May 07 '13 at 16:26
could you draw and show us what you are trying to achieve, use paint. — user1910290, May 07 '13 at 16:29
@Drwhite - why not use colResizable, and have your table width not set to fixed then? — Richard Ev, May 07 '13 at 16:30
@RichardEv: No, the table's width is not fixed, but columns still afected by resizing other columns (for example if i resize col1 then col2 will be resized too and it's not the respected result) — Drwhite, May 08 '13 at 08:42

score 3 · Answer 1 · answered Dec 23 '14 at 08:47

you can use colResizable 1.5, it allows two different methods of resizing the table: fixed and non-fixed.

By default, it is fixed, which means that when you resize a column, the next one shrinks or expands to fit the whole table. In fixed mode table width does not change at all.

I think you are asking for the non-fixed mode. In non fixed mode you can resize each column independently, so if you change the width of a column the others remain in the same state (but the table will increase its size by the same amount as the column does).

You can check some examples on its website: http://www.bacubacu.com/colresizable

but I guess that you are looking for something like this:

 $("#nonFixedSample").colResizable({fixed:false, liveDrag:true});

Unfortunately, colResizable has problems with padding. See issues [#33](https://github.com/alvaro-prieto/colResizable/issues/33) and [#45](https://github.com/alvaro-prieto/colResizable/issues/45). — lu_ko, Jul 25 '16 at 10:51

score 0 · Answer 2 · edited May 23 '17 at 11:44

I had the same question: Resizable table columns with jQuery (table wider than page)

My solution was to place contents of my column headers <th>s inside another tag- I used links (<a>s).

Instead of doing anything with the <th> I had to set the style of the <a>s to display: block

Then just $('th a').resizable({handles:'e'});

See http://jsfiddle.net/u32a1ccL/

This uses jQuery and jQuery UI

Resize column of html table

2 Answers2