Problem setting the width to columns

prox108

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.

colin

You can control the smart column width handling with autowidth, or you can fine tune the column width with column.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

prox108

Here is a test case as you asked before:

https://jsbin.com/dekoquyehe/edit?html,js,output

• I disabled the autoWidth ( autoWidth = false), it didn't work
• I used columnDefs, it didn't work

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.

prox108

I found out a solution. By gave them a max-width and a min-width with the same value I solve the problem.

kthorngren

You might be interested in Allan's comments in this thread about column width calculations.

Kevin