Problem setting the width to columns
Problem setting the width to columns
![prox108](https://datatables.net/forums/uploads/userpics/269/nVX6DJ114ZNE1.png)
Hi, I am trying to set through Datable some column width, but for some reason it doesn't let me:
-- HTML Code
<table id="texample" class="table dataTable no-footer" style="border: none; width: 100% !important" aria-describedby="texample">
<thead style="border: none !important;">
<tr class="system">
<th class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
<th class="text-center sorting sorting_asc" tabindex="0" aria-controls="texample" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Examen: Activar para ordenar la columna de manera descendente">Examen</th>
<th style="width: 300px !important;" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="01-03-2024(01:34)">01-03-2024(01:34)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="02-03-2024(12:49)">02-03-2024(12:49)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="10-03-2024(04:54)">10-03-2024(04:54)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="10-03-2024(06:04)">10-03-2024(06:04)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="11-03-2024(22:14)">11-03-2024(22:14)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="12-03-2024(05:12)">12-03-2024(05:12)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="12-03-2024(05:28)">12-03-2024(05:28)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="12-03-2024(14:38)">12-03-2024(14:38)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="12-03-2024(14:41)">12-03-2024(14:41)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="13-03-2024(17:01)">13-03-2024(17:01)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="13-03-2024(17:42)">13-03-2024(17:42)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="14-03-2024(17:10)">14-03-2024(17:10)</th>
<th style="width: 127px !important" class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="18-03-2024(09:40)">18-03-2024(09:40)</th>
</tr>
</thead>
<tbody style="border: none !important;">
<tr class="odd">
<td class=" text-center">
<a class="btn btn-xs btn-info optgraficolis" data-optgraficolis="" data-ex="" rel="tooltip" data-placement="right" title="Generar Gráfico"><i class="fa fa-line-chart"></i></a>
</td>
<td class="text-center sorting_1">UFU</td>
<td class=" text-center">-</td>
<td class=" text-center">-</td>
<td style="width: 127px !important" class=" text-center">18,1</td>
<td class=" text-center">-</td> <td class=" text-center">-</td>
<td class=" text-center">-</td> <td class=" text-center">-</td>
<td class=" text-center">-</td> <td class=" text-center">-</td>
<td style="width: 127px !important" class=" text-center">12,4</td>
<td class=" text-center">-</td> <td class=" text-center">-</td>
<td class=" text-center">-</td></tr>
</tbody>
</table>
-- JQuery Code
tableverhistorico = $('#thistorico').DataTable({
'paging': false,
'searching': true,
'destroy': true,
'info': true,
'responsive': true,
'buttons': [],
'order': [1,'asc'],
'columnDefs':[
{
"targets": 0,
"orderable": false,
"className": 'text-center'
},
{
"targets": 1,
"orderable": true,
"className": 'text-center'
},
{
"targets": '_all',
"orderable": false,
"className": 'text-center'
}
]
});
I am using DataTable 1.11.5 and Boostrap 3.3.6.
I already try to:
- Give width to both th and td
- Give width in columnDefs
- Disabled autoWidth
But I noticed that if you change the text in one of the td's this can change the width.
Can you help me plis?
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You can control the smart column width handling with
autowidth
, or you can fine tune the column width withcolumn.width
. One of those two should do the trick.If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Colin
Here is a test case as you asked before:
https://jsbin.com/dekoquyehe/edit?html,js,output
I cant use colum.width because this colums are not alwasy the same number of columns, some are five, ten or twenty.
As you will see I tried to give them a inline style, but it didn't work either.
I found out a solution. By gave them a max-width and a min-width with the same value I solve the problem.
You might be interested in Allan's comments in this thread about column width calculations.
Kevin