固定列标题宽度与主体列宽度不匹配

标题与列宽不一致。实施例：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

下面是代码我使用的是：

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>

来源

2013-04-17 abg

检查是否[这]（http://stackoverflow.com/a/18078539/1545793）回答适用于您。 – tostasqb

我可以通过正在重置th的margin和padding零解决它：

th { 
    padding: 0 !important; 
    margin: 0 !important; 
}

来源

2013-04-17 08:23:55 pzin

更好但不好。演示：http://jsfiddle.net/TT9Xh/和截图：http://s13.postimg.org/61w8xbs8n/test。png – abg

不知道'sScrollX'确实做了什么，但是将它设置为更高的值并且之前用我的答案似乎解决了这个问题。 – pzin

高出多少？我试过100％ - > 190％，对我来说没有任何区别：/ – Ray

问题是由sScrollX，滚动条，这是增加额外的水平空间右侧的列引起的，这就是为什么其他的（没有滚动条）头部变短。

如果您评论sScrollX行，列正确对齐。

--- UPDATE ---

要解决与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：http://jsfiddle.net/aKDL7/32/

注：我也改变Count到Cnt，因为它太长了，在jsfiddle窗口，这导致了额外的宽度问题。

来源

2013-04-17 08:30:26 andzep

我需要前4列是固定的，“可用性”列是可滚动的。如果我评论sScrollX行，表格将不可滚动。 – abg

是的，我知道。问题是，单元格的宽度是由FixedColumns脚本计算的。有了这个额外的水平空间，它就会“左右”单元宽度的“错误计算”。这可能是一个错误。但我想不出有什么方法通过纯粹的CSS来清理干净。也许你可以在左边添加一个滚动条，但是修正它？或者“只是”修改js脚本。 – andzep

如果你还没有解决这个问题，我认为最简单的方法是将表格的第一行（标题下方）的标题重新分配给标题单元格。所以你再次在头部和身体单元之间匹配宽度。 – andzep

当数据表包含水平填充时，会错误计算宽度。

我解决了这个问题，通过从th中删除我的填充，在里面添加一个span，然后将填充添加到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>

来源

2013-11-01 08:54:18 jb510

固定列标题宽度与主体列宽度不匹配

回答

相关问题