DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Problem setting the width to columns

Problem setting the width to columns

prox108prox108 Posts: 27Questions: 12Answers: 0
edited May 28 in Free community support

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • prox108prox108 Posts: 27Questions: 12Answers: 0
    edited May 28

    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.

  • prox108prox108 Posts: 27Questions: 12Answers: 0

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

  • kthorngrenkthorngren Posts: 21,322Questions: 26Answers: 4,948

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

    Kevin

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.