columns.width - percentages being converted to pixels?

Scoobysnack

  jQuery('.tableClass').DataTable({
        "paging":   false,
        "info":     false,
        "searching": false,
        "ordering": false,
        "columns": [
            {"width": "40%"},
            {"width": "60%"}
        ]        
    });

Also tried this:

   jQuery('.tableClass').DataTable({
        "paging":   false,
        "info":     false,
        "searching": false,
        "ordering": false,
        "columnDefs": [
            {"width": "40%", "targets": 0},
            {"width": "60%", "targets": 1}
        ]        
    });

In both cases the inline width being applied is 40px and 60px, not percentages....(?)

allan

Hi - yes this is correct for how DataTables operates at the moment. It isn't ideal I know, but when scrolling is enabled the columns have to be in pixels to allow them to align correctly, so this is carried over.

The percentage values are used for the width calculations that DataTables performs - you should still see a 40/60 width split, and that will continue to be correct as the page is resized.

If you want percentage values then you can disable the autoWidth option but you need to be a bit careful with that if you enable scrolling.

Allan

Scoobysnack

Gotcha! I've added autoWidth: false to this table as there's no scrolling on it (nor will there be).

For information, there is no effect at all on the table: any percentage change I make (tried at 50/50, 70/30, 80/20 as well) all look exactly the same, because the inline sizes (50px + 50px, or 70px + 30px, etc) are so small that they are ignored, and the display is in line with default table behaviour ie the first column takes the space it needs, and the second takes the rest (only two columns in this particular table).

On columns.width the example shown uses percentages, without mentioning about autowidth. I've added a 'tip' to that page which may be helpful to others. :) Please edit as necessary.