Columns don't resize on window resize unless scrollX is true

elnjensen

I've just switched over to using DataTables, and I'm really loving its capabilities. So thanks for the excellent software.

My small issue: in my table, the columns don't resize when the window size is changed, unless scrollX is set to true. Is that the expected behavior? My only issue with just setting that to true is that it then makes the rendering of the table too wide for the iPad screen and forces the user to scroll, whereas if I keep scrollX=false and turn on responsive, the table fits fine on an iPad screen, so I'd like to use that if possible (but to have my desktop users have the columns resize automatically on a window size change).

I'm initializing the table like this:

  $(document).ready( function () {
     var table = $('#target_table').DataTable( {
          "scrollX": false, 
          "columnDefs": [
                         { "visible": false, "targets": [0] },
                         { "orderSequence": [ "desc", "asc" ], "targets": [ 7, 10, 11 ] },
           ],
          "order": [[ 6, "asc" ]],
      } );

  } );

and working examples are here:

With scrollX = false : http://astro.swarthmore.edu/test/test_scrollx_false.html
With scrollX = true : http://astro.swarthmore.edu/test/test_scrollx_true.html

I also tried adding

   $(window).on('resize', function () {
      table.columns.adjust(); 
       } );

to the initialization, but that doesn't seem to help; it still requires scrollX = true to work correctly.

Thanks in advance for any thoughts!

allan

Add width="100%" or style="width:100%" to your table. That allows DataTables to know automatically that you want it to be 100% width.

Its virtual impossible (or rather unrealistically hard) to get a percentage value from the stylesheet for the table which is why that is needed.

Allan

elnjensen

Works great - thanks for the quick help!

amresnakre

Use autoWidth: true