jQuery 固定列标题宽度与正文列宽度不匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16054584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed column header width does not match body column widths
提问by abg
The headers don't line up with the column widths. JsFiddle.
标题不与列宽对齐。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
- 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:
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:
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>
回答by andzep
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.
问题是由 sScrollX-scrollbar 引起的，它为右侧的列添加了额外的水平空间，这就是为什么其他列（没有滚动条）在标题上变短的原因。
If you comment the sScrollX line, the columns align correctly.
如果您注释 sScrollX 行，则列会正确对齐。
--- UPDATE ---
- - 更新 - -
To fix the widths with js, this would work:
要使用 js 修复宽度，这将起作用：
// *** 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
我更新了一个jsfiddle
Note: I changed also Countto Cnt, because it was too long, on the jsfiddle window, which caused additional width problems.
注意：我在jsfiddle窗口上也改Count了Cnt，因为太长了，导致了额外的宽度问题。
回答by jb510
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.
我通过从 th 中删除我的填充，在其中添加一个跨度，然后将填充添加到跨度来解决这个问题。
ie.
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>
回答by pzin
I could solve it by reseting th's margin and padding to zero:
我可以通过将th的边距和填充重置为零来解决它：
th {
padding: 0 !important;
margin: 0 !important;
}
