Column Filtering and adjusting column Width

timcadieux

I'm attempting to adjust the width of my columns but no matter what I do, the columns seem to adjust to fit the content inside them.

If I remove all table layout html and just use the below, then the resizing works but I lose the column filtering. If I use the thead and tfoot, then the sizing seems to not work

<table class="table table-bordered table-hover dt-responsive" id="datatable">
</table>

I've purchased the Picollo Support credits but I dont seem to have any new options?

Any help would be appreciated..codepen below

https://codepen.io/anon/pen/rzMGpp

HPB

In the test case you linked it is the inputs that take up the space.
I have been working around this by applying a 100% width style to the filter inputs.

Line 4:
$(this).html( '<input type="text" placeholder="Search" style="width: 100%" />' );

You will still get your columns adjusted by the content, because setting width in percentages and applying nowrap to the cells doesn't work together.
I would recommend to either remove the autoWidth attribute, or to remove the nowrap style for td's,

tangerine

"Piccolo" is a supporter donation. If you are looking for paid support, the options are here:
https://datatables.net/support/index

timcadieux

Changing this worked for me

$(this).html( '<input type="text" placeholder="Search" style="width: 100%" />' );