跨浏览器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 Image

Google Chrome图片

Answer 1

在表格的CSS上，删除：

display: block;

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

如果你想进一步居中，那就在使用class sorting_disabled的CSS上添加：

text-align: center;