Css 为引导数据表中的列设置类似的宽度

我想创建一个列宽相似的datatable，而且我希望它应该是响应性的。 我已经创造了以下小提琴同样。

对于列宽，我添加了以下css

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    white-space: normal!important;
}
table.table {
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed;         
  word-wrap:break-word;   
}

js代码中也发生了变化

$('#example').DataTable({
  "scrollY": "300px",
  "scrollCollapse": true,
  "bAutoWidth": false,
  "aoColumns": [
       { "sWidth": "10%" }, 
       { "sWidth": "15%" }, 
       { "sWidth": "10%" },
       { "sWidth": "10%" }, 
       { "sWidth": "10%" }, 
       { "sWidth": "10%" },
       { "sWidth": "10%" }, 
       { "sWidth": "10%" }, 
       { "sWidth": "10%" } 
      ]
 });

更改后，如下所示

---

如何使用响应数据表设置列的宽度

更改css，如下所示：

@媒体屏幕和（最小宽度：您的\u目标\u屏幕大小px）
{
table.table-bordered.dataTable th，table.table-bordered.dataTable td{
...  
}
}