固定列标题宽度与主体列宽不匹配 [英] Fixed column header width does not match body column widths
本文介绍了固定列标题宽度与主体列宽不匹配的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
标题不与列宽对齐。
示例： http://jsfiddle.net/DyMSb/1/
The headers don't line up with the column widths. Example: http://jsfiddle.net/DyMSb/1/
屏幕截图： http://s17.postimg.org/ dybznay9b / screen.png
我正在使用：
- 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
这里是我使用的代码：
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>
推荐答案
Datatables在包含水平填充时会错误计算宽度。
Datatables miscalculates the th widths when they include horizontal padding.
我通过从中删除我的填充，在其中添加一个span，然后将填充添加到span来解决这个问题。
I worked around this by removing my padding from the th, adding a span inside it and then adding the padding to the span.
即
<style>
th {padding: 0}
th > span {padding: 0 10px}
<style>
更改如下标记：
<tr>
<th rowspan="2"><span>Branch</span></th>
<th rowspan="2"><span>Object</span></th>
</tr>
这篇关于固定列标题宽度与主体列宽不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://s17.postimg.org/ dybznay9b / screen.png](\"http://s17.postimg.org/dybznay9b/screen.png\"){kind=link}