クロスブラウザのDataTableのサイズ変更が正しくありません

Question

最近、私のDataTableがdivの100％の幅を占めるようになりました。私はブートストラップと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のテーブルのためのCSS上の画像

Google Chromeの画像

Answer 1

、削除：

display: block; 

これは、Safariのイメージのように見えるようにする必要があります。 ..それ以外：

あなたはクラスで目のためのCSS上で、さらにそれよりも中心にしたい場合は、追加sorting_disabled：

text-align: center;