交叉浏览器DataTable大小错误

Question

最近我一直无法让我的DataTable占据其div的100％宽度。我正在使用Bootstrap和jQuery。你们中的任何人有什么想法？

HTML

<div class="form-group" style="height: 400px; width: 100%;"> 
    <div class="row"> 
    <br> 
     <table data-role="table" id="datatables2" class="datatables display ui-responsive form-table" style="width: 100%;"> <!--Beginning Table --> 
    <thead> 
    <tr> 
     <th>Staff</th> 
     <th>Comment</th> 
     <th>Search</th> 
     <th>Priority</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> <!-- End Table --> 
</div> 

CSS

table { 
overflow-x: auto; 
display: block; 
width: 100% !important; 
font-size: 13px; 
} 

jQuery的

aTable = $('table#datatables2').DataTable({ 
    scrollX: false, 
    retrive: true, 
    ordering: false, 
    bFilter: false, 
    bPaginate: false, 
    bInfo: false, 
    responsive: true 
    }); 

链接/脚本：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/r-2.1.1/sc-1.4.2/se-1.2.0/datatables.min.css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/r-2.1.1/sc-1.4.2/se-1.2.0/datatables.min.js"></script> 

Safari的图片

谷歌浏览器的图像

Answer 1

在CSS的表，删除：

display: block; 

这应该使它看起来像Safari的图像。 ..否则：

如果你想比进一步中心，对CSS的日与类sorting_disabled补充：

text-align: center;