Menu
The headers don't line up with the column widths. JsFiddle.
Screenshot
I'm using:
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>
727
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>
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.
2
I could solve it by reseting th's margin and padding to zero:
th {
padding: 0 !important;
margin: 0 !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
