6

标题不与列宽对齐。提琴手。

截屏

我在用着：

  • 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>
4

3 回答 3

2

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

我通过从 th 中删除我的填充，在其中添加一个跨度，然后将填充添加到跨度来解决这个问题。

IE。

<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-01T08:54:18.127 回答
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

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

于 2013-04-17T08:30:26.650 回答
1

我可以通过将th的边距和填充重置为零来解决它：

th {
  padding: 0 !important;
  margin: 0 !important;
}
于 2013-04-17T08:23:55.080 回答