Column/Table Width

kevins1966

Hi all,

I am trying to work out what is controlling the width for the columns/table of my DataGrid.

I have set the width of the table to be 100% as follows
<table class="table" id="DataGrid" style="width:100%">

The first element nested in the <table> element is colgroup which contains <col> elements each of which have the width set in the style attribute as 173px as follows
<col style="width: 173px;">

Presumably '<colgroup>` gets added by the datatable library because it's not part of the html so how can the width be controlled, in this case by linking it to the content?

I have tried using columnDefs: [{width: '1%', targets: '_all'}], when setting up the table but that does not alter the 173 value set for the <col> elements.

Any thoughts?

Thanks in advance

allan

Yes, DataTables will add the colgroup to assign the column width. You can use columns.width to set a width for a column as you have done, however, DataTables and the browser can overrule you! If there isn't enough space for the content in the column, then your size is taken as a "suggestion" and it will actually use as much as it needs to to show the content.

If you link to a test case showing the issue I can be more specific about what is forcing the width in the column.

Allan

allan

Worth noting as well that columnDefs: [{width: '1%', targets: '_all'}] would only be appropriate if you have exactly 100 columns. How many do you have? That is part of why it is treated as a suggestion.

To explain a little more, what happens is that DataTables will construct a hidden "worst case" table (i.e. the widest string from all columns into a single row), apply the size information from columns.size and then read back what the browser renders it as. That is then used for the colgroup / col sizes.

Allan

kevins1966

Thanks for the feedback.
I'll try and rig up a test case but that means stripping out a load of code so that may take a little time.