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

Question

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

abg*_*abg 6 css jquery jquery-ui jquery-plugins datatables

标题与列宽不对齐.JsFiddle.

截图

我正在使用:

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();
});

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

pzi*_*zin 1

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，9 月前
查看次数：	24802 次
最近记录：	7 年，6 月前