Geek Answers Handbook

Fixed column header width does not match body column width

Headings do not match column widths. Example: http://jsfiddle.net/DyMSb/1/

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

I use:

  • 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>
+4
source share
3 answers

Datatables calculates the width of th when they include horizontal padding.

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

t

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

Change the layout as follows:

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

I could solve this by translating th margin and padding to zero:

 th { padding: 0 !important; margin: 0 !important; }
+1
source

The problem is caused by the sScrollX scrollbar, which adds extra horizontal space to the columns on the right side and that the others (without the scrollbar) are getting shorter in the header.

If you comment out the sScrollX line, the columns are aligned correctly.

--- UPDATE ---

To fix the width with js, this will 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 jsfiddle here: http://jsfiddle.net/aKDL7/32/

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

+1
source

More articles:


All Articles