固定列标题宽度与正文列宽度不匹配答案

【问题标题】：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 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>

【问题讨论】：

检查this的答案是否适用于您。

标签： jquery css jquery-ui jquery-plugins datatables

【解决方案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% 对我来说并没有什么不同：/