Fixed column header width does not match body column widths

jquery css jquery-ui jquery-plugins datatables

25,829

Solution 1

Datatables miscalculates the th widths when they include horizontal padding.

I worked around this by removing my padding from the th, adding a span inside it and then adding the padding to the span.

ie.

<style>
th {padding: 0}
th > span {padding: 0 10px}
<style>

Change markup like this:

<tr>
 <th rowspan="2"><span>Branch</span></th>
 <th rowspan="2"><span>Object</span></th>
</tr>

Solution 2

The Problem is caused by the sScrollX-scrollbar, which is adding extra horizontal space to the columns on the right side, and that's why the other ones (without scrollbar) get shorter on the header.

If you comment the sScrollX line, the columns align correctly.

--- UPDATE ---

To fix the widths with js, this would work:

// *** FIX WIDTHS ON LEFT SIDE ***
var widths = [];

// first fix widths on tbody ...
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){
        $(this).css('width', $(this).width());
    });

// ... now save the actual widths on array
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){ 
        widths.push($(this).width());
    });

// ... and now update widths on thead
$('.DTFC_LeftHeadWrapper thead th').each(
    function(i, val){
        console.log('i:', i, ', width:',  widths[i]);
        $(this).css('width', widths[i]);
    });

I updated a jsfiddle

Note: I changed also Count to Cnt, because it was too long, on the jsfiddle window, which caused additional width problems.

Solution 3

I could solve it by reseting th's margin and padding to zero:

th {
  padding: 0 !important;
  margin: 0 !important;
}

25,829

Author by

abg

Updated on July 26, 2020

Comments

abg almost 4 years

The headers don't line up with the column widths. JsFiddle.

Screenshot

I'm using:

ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css
ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css
datatables.net/release-datatables/media/js/jquery.js
datatables.net/release-datatables/media/js/jquery.dataTables.js
datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js

Here is the code I'm using:

JS:

$(document).ready(function() {   
    var aoColumns = [null,null,null,null,null,null,null,null,null,null,null];

    var oTable = $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "150%",
        "bPaginate": false,
        "bAutoWidth": false,
        "aoColumns": aoColumns       
    } );

    var oFC = new FixedColumns( oTable, {
        "iLeftColumns": 4
    } );

    oTable.fnAdjustColumnSizing();
});

HTML:

<body>
   <div class="container">
      <table width="100%" cellpadding="0" cellspacing="0" border="1" id="example">
         <thead>
            <tr>
               <th rowspan="2">Branch</th>
               <th rowspan="2">Object</th>
               <th rowspan="2">Address</th>
               <th rowspan="2">Count</th>
               <th colspan="7">Availability</th>
            </tr>
            <tr>
               <th>15</th>
               <th>16</th>
               <th>17</th>
               <th>18</th>
               <th>19</th>
               <th>20</th>
               <th>21</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>United States of America, Washington</td>
               <td>ABC-123</td>
               <td>1514 Amber Pond Highway, Nohead Bottom, Washington, 99205-8224, US, (425) 023-9448</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, South Dakota</td>
               <td>DEF-456</td>
               <td>7827 Stony Pointe, Sunsweet, South Dakota, 57006-2156, US, (605) 621-7800</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, Newfoundland</td>
               <td>XYZ-549</td>
               <td>2379 Dewy Pioneer Highlands, Humbug, Newfoundland, A7O-6P5, CA, (709) 217-5115</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
            <tr>
               <td>United States of America, Washington</td>
               <td>GHI-789</td>
               <td>5842 Easy Bay, Kravaksarak, Washington, 98428-9376, US, (425) 998-1922</td>
               <td><a href="#">7</a></td>
               <td>-</td><td>-</td><td>-</td>
               <td>-</td><td>-</td><td>-</td><td>-</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>