Colvis hiding columns makes the rest of the columns wider

Colvis hiding columns makes the rest of the columns wider

fearednerdfearednerd Posts: 44Questions: 0Answers: 0
edited August 2012 in General
I was wondering if there was a way to let the column widths stay fixed after hiding a column. I have a lot of columns and trying to keep the table width reasonable, but when I hide columns by default the unused width space gets redistributed to the rest of the columns.

Replies

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin
    I'm not 100% sure what is happening without seeing an example, but I would guess that (hopefully) all you need to do is remove the width:100% from the CSS for the table. It might not be as simple as that, but that's where I would start.

    Allan
  • fearednerdfearednerd Posts: 44Questions: 0Answers: 0
    I guess my problem can be seen with the live example in the colvis page.
    http://datatables.net/release-datatables/extras/ColVis/

    If you hide all the columns but one, the one remaining column gets wider instead of maintaining its width.
    I was wondering if there was a way to get them to stay the same width whether or not a column gets hidden.
  • killerardvarkkillerardvark Posts: 5Questions: 0Answers: 0
    For anyone wondering how to fix this, here is what I did. I made the column widths static using the following option.
    [code]
    "aoColumnDefs": [
    { "sWidth": "70px", "aTargets": [ "staticWidthColumn" ] }
    ],
    [/code]

    Any column with a class of staticWidthColumn will always be 70px wide.

    This then poses an issue that the header will always be centered while the data shifts to the left. To fix this i added the following lines to the jquery.data.Tables.js. I'm sure there is a better way to do this with css but i havent gotten there yet.

    This goes in about line #3085
    [code]
    nScrollHead.align = "left";
    nScrollHeadInner.align = "center";
    [/code]
This discussion has been closed.