固定列标题宽度与正文列宽度不匹配
Posted
技术标签:
【中文标题】固定列标题宽度与正文列宽度不匹配【英文标题】：Fixed column header width does not match body column widths 【发布时间】：2013-04-09 21:26:26 【问题描述】：标题不与列宽对齐。 JsFiddle.
Screenshot
我正在使用：
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 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>
【问题讨论】：
检查this的答案是否适用于您。 【参考方案1】：当包含水平填充时，Datatables 会错误计算 th 宽度。
我通过从 th 中删除我的填充，在其中添加一个跨度，然后将填充添加到跨度来解决这个问题。
即。
<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>
【讨论】：
【参考方案2】：问题是由 sScrollX-scrollbar 引起的，它为右侧的列添加了额外的水平空间，这就是为什么其他列（没有滚动条）在标题上变短的原因。
如果您注释 sScrollX 行，则列正确对齐。
--- 更新 ---
要使用 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]);
);
我更新了jsfiddle
注意：我也把Count改成了Cnt，因为太长了，在jsfiddle窗口上，导致额外的宽度问题。
【讨论】：
我需要前 4 列是固定的，并且“可用性”列是可滚动的。如果我评论 sScrollX 行，表格将无法滚动。 是的，我知道。问题是，固定列脚本计算单元格宽度的方式。有了这个额外的水平空间，它就会“错误地计算”左侧单元格的宽度。这可能是一个错误。但我想不出任何方法可以通过纯 css 彻底解决这个问题。也许您也可以在左侧添加一个滚动条，但是以某种方式修复它？或者“只是”修改 js 脚本。 如果您还没有解决问题，我认为最简单的方法是将表格第一行（标题下方）的 withs 重新分配给标题单元格。因此，您再次拥有标题和正文单元格之间的匹配宽度。【参考方案3】：我可以通过将th 的边距和填充重置为零来解决它：
th
padding: 0 !important;
margin: 0 !important;
【讨论】：
更好但不是很好。演示：jsfiddle.net/TT9Xh 和截图：s13.postimg.org/61w8xbs8n/test.png 不知道sScrollX 的真正作用，但将其设置为更高的值并且我之前的回答似乎可以解决它。
高多少？我尝试了 100% -> 190% 对我来说并没有什么不同：/以上是关于固定列标题宽度与正文列宽度不匹配的主要内容，如果未能解决你的问题，请参考以下文章
datatable jquery - 表头宽度与正文宽度不对齐