Datatables column width.

[brian15coParticipant Posts: 19]

Hello, I am unable to control the widths of my datatables columns. I have tried

“columns”:

{ “data”: “DT_RowId”,

“width”: “5px”},

Where “5px” has been replaced with “5%” or “5em”

I have also tried setting width in the html

<th width=”5%”>

WorkOrder #

</th>

Not a single thing that I try seems to make any difference on the table. Any suggestions?

 

[SeanKeymaster Posts: 4380]

Hi,

Thanks for contacting our support.

To set a custom width for columns you will need to turn off auto width and set set width for each columns as shown below:

“autoWidth”: false,

“columns”: [{
“orderable”: false
}, {
“orderable”: true,
‘width’: ‘120’,
}, {
“orderable”: false,
‘width’: ‘120’,
}, {
“orderable”: false
}, {
“orderable”: true
}, {
“orderable”: false
}],

For more info please check the official doc:

https://datatables.net/reference/option/columns.width
https://datatables.net/reference/option/autoWidth

Thanks.

[brian15coParticipant Posts: 19]

I know this topic is old, bit this is still a problem. The column width is ignored whether it is entered in the html, defined using “columnDefs option on table initialization, or defined using column option on datatable init. Any suggestions?

 

 

[SeanKeymaster Posts: 4380]

Hi,

May i know what Metronic version are you using ? By right even with HTML TD attribute you should be able to set the width. E.g:  width=”10%” or width=”100″.

Thanks.

[brian15coParticipant Posts: 19]

.

• This reply was modified 2 years, 5 months ago by  brian15co.

[brian15coParticipant Posts: 19]

I am using Metronic 3.6.2

With the following html, where would I put the width so that it works. It seems to be overwritten by the javascript no matter what I try.

<div class=”table-container”>

<table class=”table table-striped table-bordered table-hover” id=”users_table”>

<thead>

<tr role=”row” class=”heading”>

<th>

First Name

</th>

</tr>

<tr role=”row” class=”filter”>

<td>

</td>

</tr>

</thead>

<tbody>

</tbody>

I have also tried modifying theme/assets/global/datatable.js as well as the individual constructors for each table to add the “columnDefs” option, nothing is sticking.

Thanks!

[SeanKeymaster Posts: 4380]

Hi,

Please try to set fixed with for table column’s as shown below:

<th style=”width: 150px !important”>First Name</th>

If you need any further assistance please let us know.

Thanks.