Problem setting the width to columns
Problem setting the width to columns
prox108
Posts: 18Questions: 9Answers: 0
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