Monday, May 20, 2024
Homepage · css
 Popular · Latest · Hot · Upcoming
167
rated 0 times [  172] [ 5]  / answers: 1 / hits: 25406  / 8 Years ago, thu, september 29, 2016, 12:00:00

I want to set static width for all DataTables (with scroll plugin) columns.



It makes the columns wider if I set width for all <th> tags except one. And it doesn't work if the width is set for all tags. Plus, when I inspect via the developer tools, I don't see any <th> element with width 400px. The elements have different width: 115px, 132px, 145px ...



Why is that? How can I set the exact width for columns?



CSS



.big-col {

  width: 400px;

}


JS



var options = {

    sScrollX: 100%,

    sScrollXInner: 110%,

    bScrollCollapse: true,

    colReorder: true

};



$(document).ready(function() {

    $('#example').dataTable(options);

});


Full example: http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/



Also, I tried the columnDefs option, without success.



 var options = {

    columnDefs: [

      { width: 100px, targets: _all }

    ]

 };


The exact number of columns is unknown. The HTML table is built dynamically based on data from a server side.


More From » css
 Answers
10 
th.big-col{

width:400px !important;

}



table#example{

table-layout:fixed;

}


The !important for the width is necessary to override any inline styles being applied by datatables, and possibly other styles being applied by jsfiddle or whatever.
The table-layout:fixed; will make the table renderer prioritize the width of the cells in the first row for deciding the width of all cells in each column.



Update: The fiddle seems to be down, so here's a code snippet:





let options = {

    sScrollX: 100%,

    sScrollXInner: 110%,

    bScrollCollapse: true,

    colReorder: true

};



$(document).ready(function() {

    $('#example').dataTable(options);

});

.big-col {

  width: 400px !important;

}



table#example{

  table-layout:fixed;

}

   

    <title>Example 1 - apply dataTable()</title>

      <head>

      <link rel=stylesheet type=text/css href=http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css>

      <link rel=stylesheet type=text/css href=http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css>





        <script type=text/javascript charset=utf8 src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js></script>

        <script type=text/javascript charset=utf8 src=http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js></script>

      

      

  </head>



    <body>

        <div class=container>

            

<table cellpadding=0 cellspacing=0 border=0 class=dataTable id=example>

    <thead>

        <tr>

            <th class=big-col>Rendering engine</th>

            <th class=big-col>Browser</th>

            <th class=big-col>Platform(s)</th>

            <th class=big-col>Engine version</th>

            <th class=big-col>CSS grade</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Trident</td>

            <td>Internet

                 Explorer 4.0</td>

            <td>Win 95+</td>

            <td> 4</td>

            <td>X</td>

        </tr>

        <tr>

            <td>Trident</td>

            <td>Internet

                 Explorer 5.0</td>

            <td>Win 95+</td>

            <td>5</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Trident</td>

            <td>Internet

                 Explorer 5.5</td>

            <td>Win 95+</td>

            <td>5.5</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Trident</td>

            <td>Internet

                 Explorer 6</td>

            <td>Win 98+</td>

            <td>6</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Trident</td>

            <td>Internet Explorer 7</td>

            <td>Win XP SP2+</td>

            <td>7</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Trident</td>

            <td>AOL browser (AOL desktop)</td>

            <td>Win XP</td>

            <td>6</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Firefox 1.0</td>

            <td>Win 98+ / OSX.2+</td>

            <td>1.7</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Firefox 1.5</td>

            <td>Win 98+ / OSX.2+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Firefox 2.0</td>

            <td>Win 98+ / OSX.2+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Firefox 3.0</td>

            <td>Win 2k+ / OSX.3+</td>

            <td>1.9</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Camino 1.0</td>

            <td>OSX.2+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Camino 1.5</td>

            <td>OSX.3+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Netscape 7.2</td>

            <td>Win 95+ / Mac OS 8.6-9.2</td>

            <td>1.7</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Netscape Browser 8</td>

            <td>Win 98SE+</td>

            <td>1.7</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Netscape Navigator 9</td>

            <td>Win 98+ / OSX.2+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.0</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.1</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.1</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.2</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.2</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.3</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.3</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.4</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.4</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.5</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.5</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.6</td>

            <td>Win 95+ / OSX.1+</td>

            <td>1.6</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.7</td>

            <td>Win 98+ / OSX.1+</td>

            <td>1.7</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Mozilla 1.8</td>

            <td>Win 98+ / OSX.1+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Seamonkey 1.1</td>

            <td>Win 98+ / OSX.2+</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Gecko</td>

            <td>Epiphany 2.20</td>

            <td>Gnome</td>

            <td>1.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>Safari 1.2</td>

            <td>OSX.3</td>

            <td>125.5</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>Safari 1.3</td>

            <td>OSX.3</td>

            <td>312.8</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>Safari 2.0</td>

            <td>OSX.4+</td>

            <td>419.3</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>Safari 3.0</td>

            <td>OSX.4+</td>

            <td>522.1</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>OmniWeb 5.5</td>

            <td>OSX.4+</td>

            <td>420</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>iPod Touch / iPhone</td>

            <td>iPod</td>

            <td>420.1</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Webkit</td>

            <td>S60</td>

            <td>S60</td>

            <td>413</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 7.0</td>

            <td>Win 95+ / OSX.1+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 7.5</td>

            <td>Win 95+ / OSX.2+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 8.0</td>

            <td>Win 95+ / OSX.2+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 8.5</td>

            <td>Win 95+ / OSX.2+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 9.0</td>

            <td>Win 95+ / OSX.3+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 9.2</td>

            <td>Win 88+ / OSX.3+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera 9.5</td>

            <td>Win 88+ / OSX.3+</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Opera for Wii</td>

            <td>Wii</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Nokia N800</td>

            <td>N800</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Presto</td>

            <td>Nintendo DS browser</td>

            <td>Nintendo DS</td>

            <td>8.5</td>

            <td>C/A<sup>1</sup></td>

        </tr>

        <tr>

            <td>KHTML</td>

            <td>Konqureror 3.1</td>

            <td>KDE 3.1</td>

            <td>3.1</td>

            <td>C</td>

        </tr>

        <tr>

            <td>KHTML</td>

            <td>Konqureror 3.3</td>

            <td>KDE 3.3</td>

            <td>3.3</td>

            <td>A</td>

        </tr>

        <tr>

            <td>KHTML</td>

            <td>Konqureror 3.5</td>

            <td>KDE 3.5</td>

            <td>3.5</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Tasman</td>

            <td>Internet Explorer 4.5</td>

            <td>Mac OS 8-9</td>

            <td>-</td>

            <td>X</td>

        </tr>

        <tr>

            <td>Tasman</td>

            <td>Internet Explorer 5.1</td>

            <td>Mac OS 7.6-9</td>

            <td>1</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Tasman</td>

            <td>Internet Explorer 5.2</td>

            <td>Mac OS 8-X</td>

            <td>1</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>NetFront 3.1</td>

            <td>Embedded devices</td>

            <td>-</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>NetFront 3.4</td>

            <td>Embedded devices</td>

            <td>-</td>

            <td>A</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>Dillo 0.8</td>

            <td>Embedded devices</td>

            <td>-</td>

            <td>X</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>Links</td>

            <td>Text only</td>

            <td>-</td>

            <td>X</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>Lynx</td>

            <td>Text only</td>

            <td>-</td>

            <td>X</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>IE Mobile</td>

            <td>Windows Mobile 6</td>

            <td>-</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Misc</td>

            <td>PSP browser</td>

            <td>PSP</td>

            <td>-</td>

            <td>C</td>

        </tr>

        <tr>

            <td>Other browsers</td>

            <td>All others</td>

            <td>-</td>

            <td>-</td>

            <td>U</td>

        </tr>

    </tbody>

</table>

            

        </div>

    </body>





See also:
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout


[#60555] Tuesday, September 27, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dequant
Add To Favorites
Follow
Total Points: 88
Total Questions: 99
Total Answers: 95
Location: Ukraine
Member since Sun, Dec 13, 2020
4 Years ago
dequant questions
Sat, Aug 29, 20, 00:00, 4 Years ago
Tue, Aug 4, 20, 00:00, 4 Years ago
Thu, Jun 25, 20, 00:00, 4 Years ago
Sat, Jun 20, 20, 00:00, 4 Years ago
Tue, Feb 25, 20, 00:00, 4 Years ago
View All
;