This topic contains 6 replies, has 2 voices, and was last updated by Sean 2 years, 5 months ago.
Datatables column width.
You must be logged in to reply to this topic.
This topic contains 6 replies, has 2 voices, and was last updated by Sean 2 years, 5 months ago.
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?
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.
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?
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.
.
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!
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.
You must be logged in to reply to this topic.