Example: http://jsfiddle.net/DyMSb/1/

Screenshot: http://s17.postimg.org/dybznay9b/screen.png

The following versions are used:

  • 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

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>

Discussion in the home forum: http://www.datatables.net/forums/discussion/15133/fixed-column-header-width-does-not-match-body-column-widths#Item_1 and on StackOverflow: https: // stackoverflow.com/questions/16054584/fixed-column-header-width-does-not-match-body-column-widths

    1 answer 1

    Play with the parameters of the iLeftWidth and sLeftWidth . There it is poorly taken into account that td can stretch out if if a word does not fit the width of the cell. If you set the width more, then everything is fine.
    With iLeftWidth:120 and sLeftWidth:'relative' , for example, everything is ok.