0

I want to add column resize functionality to my html table. User should be able to resize column at runtime. I looked at various examples and plugins but they all work when you have a single table. Where Table header and table body both are part of same table tag, like this: 

<table width="100%" >
    <tr> <th> header </th> <th> header </th> </tr>
    <tr> <td> cell </td> <td> cell </td> </tr>                          
    <tr> <td> cell </td> <td> cell </td> </tr>                          
  </table>

I am using Jquery DataTable which renders table in two parts. Column Header is part of one table and body is part of another table. See the attached image for more information. enter image description here

How can I add column resize functionality in such case?

Icing on the cake : I need to support IE 8.

SharpCoder
  • 15,708
  • 34
  • 126
  • 225
  • Possible duplicate : http://stackoverflow.com/questions/2905857/table-column-resizing-drag-n-dropping-in-jquery – Swetha Sep 23 '14 at 12:08
  • @Swetha: Nope its not. The link you shared resize columns when there is only 1 table. Thanks for the reply though :) – SharpCoder Sep 23 '14 at 12:17
  • Not sure if this would work, but you might be able to put the table data in a (textarea) and resize that way -- http://davidwalsh.name/textarea-resize – Tasos Sep 23 '14 at 12:23
  • @Tasos: I need to support IE 8. That type if CSS will never work in IE 8. Thank you !!! – SharpCoder Sep 23 '14 at 12:43
  • Support end in less than 16 months for IE8. People are going to stop using it all together. :() -- http://www.techtimes.com/articles/12722/20140811/17-months-until-ie8-support-ends.htm – Tasos Sep 23 '14 at 12:49
  • @Tasos : I have already started to count the days. But until then we have to support this browser – SharpCoder Sep 23 '14 at 12:50
  • Well use any method for modern browsers and target specific CSS for IE8 only when you find a solution. -- http://stackoverflow.com/questions/3043094/is-there-any-ie8-only-css-hack – Tasos Sep 23 '14 at 12:53

1 Answers1

0

With datatables you set the columns like so 

$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

Which sets the width of the first column and leaves the other columns auto. You may need to redraw the table after changing the width if you do it after initialization though.

$('#example').DataTable().columns.adjust().draw();
DGS
  • 5,977
  • 1
  • 18
  • 37
  • I want user to have the ability to resize the column at the run time. Looks like what you are suggesting is resizing columns width though code. – SharpCoder Sep 23 '14 at 12:26
  • You are using the jQuery plugin which means you are javascript already. This code I am showing you is just the way you customize the datatables plugin to work the way you want it to – DGS Sep 23 '14 at 12:28
  • Thank you for quick reply. But I am still not sure, How i can use the code you shared for my advantage while column resizing? – SharpCoder Sep 23 '14 at 12:30