Resizable table columns with jQuery

Question

This is the only jQuery plugin I could find to resize table column widths  but it does not integrate well with my table  and has unnecessary bloat  saves in cookies   Are there any other plugins for just resizing columns   NOT datagrid plugins  please don t suggest those    If not  I ll write my own  it shouldn t be too hard  I just don t know how to detect when a user clicks on the td border  to resize   Any ideas

User · Answer

try flexigrid  here is One more Reference

User · Answer

Although very late  hope it still helps someone   Many of comments here and in other posts are concerned about setting initial size   I used jqueryUi Resizable  Initial widths shall be defined within each   lt  td    tag at first line   lt  TR     This is unlike what colResizable recommends  colResizable prohibits defining widths at first line  there I had to define widths in   lt  col   tag which wasn t consikstent with jqueryresizable   the following snippet is very neat and easier to read than usual samples       Content td   resizable       handles   e  s       resize  function  event  ui            var sizerID           event target  attr  id              sizerID  width ui size width               Content is id of my table  Handles  e  s  define in which directions the plugin can change the size  You must have a link to css of jquery-ui  otherwise it won t work

User · Answer

-  Once I found myself in the same situation  there was no jQuery plugin matching my requeriments  so I spend some time developing my own one  colResizable  nbsp   About colResizable  colResizable is a free jQuery plugin to resize table columns dragging them manually  It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback  It works with both percentage and pixel-based table layouts    It is tiny in size  colResizable 1 0 is only 2kb  and it is fully compatible with all major browsers  IE7   Firefox  Chrome and Opera       Features  colResizable was developed since no other similar plugin with the below listed features was found                    Compatible with mouse and touch devices  PC  tablets  and mobile phones                      Compatibility with both percentage and pixel-based table layouts                     Column resizing not altering total table width  optional                      No external resources needed  such as images or stylesheets                                         Optional layout persistence after page refresh or postback                      Customization of column anchors                      Small footprint                     Cross-browser compatibility  IE7   Chrome  Safari  Firefox                      Events   Comparison with other plugins  colResizable is the most polished plugin to resize table columns out there  It has plenty of customization possibilities and it is also compatible with touch devices  But probably the most interesting feature which is making colResizable the greatest choice is that it is compatible with both pixel-based and fluid percentage table layouts  But  what does it mean   If the width of a table is set to  lets say 90   and the column widths are modified using colResizable  when the browser is resized columns widths are resized proportionally  While other plugins does behave odd  colResizable does its job just as expected   colResizable is also compatible with table max-width attribute  if the sum of all columns exceed the table s max-width  they are automatically fixed and updated   Another great advantage compared with other plugins is that it is compatible with page refresh  postbacks and even partial postbacks if the table is located inside of an updatePanel  It is compatible with all major browsers  IE7   Firefox  Chrome and Opera   while other plugins fail with old IE versions   See samples and JSFiddle   Code sample      sample   colResizable           liveDrag true

User · Answer

Here s a short complete html example  See demo http   jsfiddle net CU585    lt  DOCTYPE html gt  lt html gt  lt head gt  lt title gt resizable columns lt  title gt   lt meta charset  utf-8  gt   lt script src  http   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt link rel  stylesheet  href  http   ajax googleapis com ajax libs jqueryui 1 11 0 themes smoothness jquery-ui css    gt   lt script src  http   ajax googleapis com ajax libs jqueryui 1 11 0 jquery-ui min js  gt  lt  script gt   lt style gt  th  border  1px solid black   table border-collapse  collapse    ui-icon   ui-widget-content  ui-icon  background-image  none    lt  style gt   lt body gt   lt table gt   lt tr gt  lt th gt head 1 lt  th gt  lt th gt head 2 lt  th gt  lt  tr gt  lt tr gt  lt td gt a1 lt  td gt  lt td gt b1 lt  td gt  lt  tr gt  lt  table gt  lt script gt      th    resizable     lt  script gt  lt  body gt  lt  html gt

User · Answer

Or try my solution  http   robau wordpress com 2011 08 16 unobtrusive-table-column-resize-with-jquery-as-plugin

User · Answer

I have tried several solutions today  the one working best for me is Jo-Geek jQuery-ResizableColumns  Is is very simple  yet it handles tables placed in flex containers  which many of the other ones fail with    lt table class  resizable  gt   lt  table gt       table resizable   resizableColumns       x000D   x000D    function     x000D       table resizable   resizableColumns    x000D     x000D  body   x000D    margin  0px  x000D    x000D   x000D  table   x000D    width  100   x000D    table-layout  fixed  x000D    border-collapse  collapse  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   jo-geek github io jQuery-ResizableColumns demo resizableColumns min js  gt  lt  script gt  x000D   lt table class  resizable  border  true  gt  x000D     lt thead gt  x000D     lt tr gt  x000D       lt th gt col 1 lt  th gt  lt th gt col 2 lt  th gt  lt th gt col 3 lt  th gt  lt th gt col 4 lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D   x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt  lt td gt Column 3 lt  td gt  lt td gt Column 4 lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt  lt td gt Column 3 lt  td gt  lt td gt Column 4 lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I tried to add to  user686605 s work   1  changed the cursor to col-resize at the th border  2  fixed the highlight text issue when resizing  I partially succeeded at both  Maybe someone who is better at CSS can help move this forward   http   jsfiddle net telefonica L2f7F 4   HTML   lt  --Click on th and drag   -- gt   lt table gt       lt thead gt           lt tr gt               lt th gt  lt div class  noCrsr  gt th 1 lt  div gt  lt  th gt               lt th gt  lt div class  noCrsr  gt th 2 lt  div gt  lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt td 1 lt  td gt               lt td gt td 2 lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    JS    function         var pressed   false      var start   undefined      var startX  startWidth          table th   mousedown function e            start     this           pressed   true          startX   e pageX          startWidth     this  width              start  addClass  resizing              start  addClass  noSelect                   document  mousemove function e            if pressed                  start  width startWidth  e pageX-startX                             document  mouseup function             if pressed                  start  removeClass  resizing                  start  removeClass  noSelect                pressed   false                          CSS  table       border-width  1px      border-style  solid      border-color  black      border-collapse  collapse     table td       border-width  1px      border-style  solid      border-color  black     table th       border  1px      border-style  solid      border-color  black      background-color  green      cursor  col-resize     table th resizing       cursor  col-resize      noCrsr       cursor  default      margin-right   5px      noSelect       -webkit-touch-callout  none      -webkit-user-select  none      -khtml-user-select  none      -moz-user-select  none      -ms-user-select  none      user-select  none

User · Answer

I ve done my own jquery ui widget  just thinking if it s good enough   https   github com OnekO colresizable

User · Answer

So I started writing my own  just bare bones functionality for now  will be working on it next week    http   jsfiddle net ydTCZ

[jquery] Resizable table columns with jQuery

Examples related to jquery

Examples related to html

Examples related to html-table

Examples related to resize