How to resize table columns spanning across two HTML table using JavaScript/Jquery

Question

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.

How can I add column resize functionality in such case?

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

Answer 1

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();