可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

The headers don't line up with the column widths. JsFiddle.

Screenshot

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

Here is the code I'm using:

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>

回答1:

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.

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>

回答2:

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.

If you comment the sScrollX line, the columns align correctly.

--- UPDATE ---

To fix the widths with js, this would work:

// *** 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

Note: I changed also Count to Cnt, because it was too long, on the jsfiddle window, which caused additional width problems.

回答3:

I could solve it by reseting th's margin and padding to zero:

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

Fixed column header width does not match body colu

问题:

回答1:

回答2:

回答3:

收藏的人(0)

Fixed column header width does not match body colu

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮