DataTable.js不调整列宽Rails

Question

由于某些原因，我的DataTable column width没有调整。我已经从一个页面复制了很好的页面，但是列宽不起作用。

  

工作页面视图/ network_hosts / hosts_risk.html.erb：

<table id="device_table" class="table table-striped">
  <thead>
    <tr>
      <th>Security Score </th>
      <th>Detected Name </th>
      <th>Nickname</th>
      <th>IP Address </th>
      <th>Mac Address </th>
      <th>Type</th>
      <th>Major Issues </th>
      <th>Minor Issues </th>
      <th><span class="nobr">Action</span></th>
    </tr>
  </thead>
  <tbody>
    <% @network_hosts_at_risk.each do |h| %>
    <tr style='color:#D7DBDD;'>
      <td> <%= h.status %></td>
      <td><%= h.hostname ? h.hostname : "Hostname Unknown" %></td>
      <td><%= h.nickname ? h.nickname : "" %></td>
      <td><%= h.ip_address ? h.ip_address : "None Detected" %></td>
      <td><%= h.mac_address ? h.mac_address : "None Detected" %></td>
      <td><%= h.os_vendor ? h.os_vendor : "Unknown" %></td>
      <td><%= get_host_issues(h, last_test, "major").count %></td>
      <td><%= get_host_issues(h, last_test, "minor").count %></td>
      <td>
          <a href='#'><i class='fa fa-close'></i></a>
          <a href='#'><i class='fa fa-eye'></i></a>
          <a href='#'><i class='fa fa-edit'></i></a>
      </td>
    </tr>
  <% end %>
  </tbody>
</table>

<script>
  $(document).ready(function(){
    $("#device_table").DataTable( {
      order: [[ 0, "asc"]],
      pageLength: 50,
      dom: 'Bfrtip',
      buttons: ['copy','excel', 'pdf','csv','print'],
      columns: [ null, null, null, null, null, null, null, null, { "width" : "10%" } ]
    });
  });
</script>

  

非工作页面/views/network_hosts/index.html.erb：

<table id="device_table" class="table table-striped">
      <thead>
        <tr>
          <th>Security Score </th>
          <th>Detected Name </th>
          <th>Nickname</th>
          <th>IP Address </th>
          <th>Mac Address </th>
          <th>Type</th>
          <th>Major Issues </th>
          <th>Minor Issues </th>
          <th><span class="nobr">Action</span></th>
        </tr>
      </thead>
      <tbody>
        <% @network_hosts.each do |h| %>
        <tr style='color:#D7DBDD;'>
          <td> <%= h.status %></td>
          <td><%= h.hostname ? h.hostname : "Hostname Unknown" %></td>
          <td><%= h.nickname ? h.nickname : "" %></td>
          <td><%= h.ip_address ? h.ip_address : "None Detected" %></td>
          <td><%= h.mac_address ? h.mac_address : "None Detected" %></td>
          <td><%= h.os_vendor ? h.os_vendor : "Unknown" %></td>
          <td><%= get_host_issues(h, last_test, "major").count %></td>
          <td><%= get_host_issues(h, last_test, "minor").count %></td>
          <td>
              <a href='#'><i class='fa fa-close'></i></a>
              <a href='#'><i class='fa fa-eye'></i></a>
              <a href='#'><i class='fa fa-edit'></i></a>
          </td>
        </tr>
      <% end %>
      </tbody>
    </table>

    <script>
      $(document).ready(function(){
        $("#device_table").DataTable( {
          order: [[ 0, "asc"]],
          pageLength: 50,
          dom: 'Bfrtip',
          buttons: ['copy','excel', 'pdf','csv','print'],
          columns: [ null, null, null, null, null, null, null, null, { "width" : "10%" } ]
        });
      });
    </script>

您会注意到代码实际上是相同的，但这里是视图之间的区别：

  

这个是对的：   

     

这个没有调整：   

这是怎么回事？？