Databases
StackOverflow2013
Postsdbo
POFixed column header width does not match body column widths
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed column header width does not match body column widths
    text
    copied!<p>The headers don't line up with the column widths. <a href="http://jsfiddle.net/DyMSb/1/" rel="nofollow noreferrer">JsFiddle</a>.</p> <p><a href="http://s17.postimg.org/dybznay9b/screen.png" rel="nofollow noreferrer">Screenshot</a></p> <p>I'm using:</p> <ul> <li>ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css</li> <li>ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css</li> <li>datatables.net/release-datatables/media/js/jquery.js</li> <li>datatables.net/release-datatables/media/js/jquery.dataTables.js</li> <li>datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js</li> </ul> <p>Here is the code I'm using:</p> <p>JS:</p> <pre><code>$(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(); }); </code></pre> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div class="container"&gt; &lt;table width="100%" cellpadding="0" cellspacing="0" border="1" id="example"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th rowspan="2"&gt;Branch&lt;/th&gt; &lt;th rowspan="2"&gt;Object&lt;/th&gt; &lt;th rowspan="2"&gt;Address&lt;/th&gt; &lt;th rowspan="2"&gt;Count&lt;/th&gt; &lt;th colspan="7"&gt;Availability&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;15&lt;/th&gt; &lt;th&gt;16&lt;/th&gt; &lt;th&gt;17&lt;/th&gt; &lt;th&gt;18&lt;/th&gt; &lt;th&gt;19&lt;/th&gt; &lt;th&gt;20&lt;/th&gt; &lt;th&gt;21&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;United States of America, Washington&lt;/td&gt; &lt;td&gt;ABC-123&lt;/td&gt; &lt;td&gt;1514 Amber Pond Highway, Nohead Bottom, Washington, 99205-8224, US, (425) 023-9448&lt;/td&gt; &lt;td&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;United States of America, South Dakota&lt;/td&gt; &lt;td&gt;DEF-456&lt;/td&gt; &lt;td&gt;7827 Stony Pointe, Sunsweet, South Dakota, 57006-2156, US, (605) 621-7800&lt;/td&gt; &lt;td&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;United States of America, Newfoundland&lt;/td&gt; &lt;td&gt;XYZ-549&lt;/td&gt; &lt;td&gt;2379 Dewy Pioneer Highlands, Humbug, Newfoundland, A7O-6P5, CA, (709) 217-5115&lt;/td&gt; &lt;td&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;United States of America, Washington&lt;/td&gt; &lt;td&gt;GHI-789&lt;/td&gt; &lt;td&gt;5842 Easy Bay, Kravaksarak, Washington, 98428-9376, US, (425) 998-1922&lt;/td&gt; &lt;td&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt;&lt;td&gt;-&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload