Fixed column header width does not match body column widths

Question

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

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>

check if [this](http://stackoverflow.com/a/18078539/1545793) answer applies to you. — tostasqb, Aug 06 '13 at 11:11

score 2 · Answer 1 · edited Jul 26 '18 at 06:30

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.

edited Jul 26 '18 at 06:30

Amit Verma

8,660
8
35
40

answered Apr 17 '13 at 08:30

andzep

1,877
24
35

I need to first 4 columns are fixed and "Availability" column is scrollable. If I comment the sScrollX line, table will not be scrollable. – abg Apr 17 '13 at 08:41
Yes I know. The problem is, the way the width's of the cells are calculated by the FixedColumns-script. With this extra horizontal space it's then "miscalculating" the widths of the cells on the left side. It's probably a bug. But I can't think of any way of fixing this cleanly through pure css. Maybe you can add a scrollbar on the left side too, but fix it somehow? Or "just" modify the js-script. – andzep Apr 17 '13 at 08:45
1

In case you havent fixed the problem yet, I think the easiest way would be to re-asign the withs from the first row of the table (underneath the header) to the header cells. So you have again the matching widths between header- and body-cells. – andzep Apr 17 '13 at 10:08

score 2 · Answer 2 · answered Nov 01 '13 at 08:54

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>

score 1 · Answer 3 · answered Apr 17 '13 at 08:23

1

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

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

answered Apr 17 '13 at 08:23

pzin

4,200
2
28
49

1

Better but not well. Demo: http://jsfiddle.net/TT9Xh/ and screenshot: http://s13.postimg.org/61w8xbs8n/test.png – abg Apr 17 '13 at 08:37
Don't know what `sScrollX` really does, but setting it to a higher value and with my answer before seems to fix it. – pzin Apr 17 '13 at 08:46
How much higher? I tried 100% -> 190% and there wasnt really a difference for me :/ – Ray Jan 06 '14 at 15:32

Fixed column header width does not match body column widths

3 Answers3

Linked