ブートストラップデータテーブル内のカラムと同様の幅を設定する

Question

同様のカラム幅を持つデータテーブルを作成したいと思います。 私は同じもののためにフィドルの下に作成しました。私はCSS

またjsのコードでそれが幅を設定する方法に従う https://fiddle.jshell.net/qyjxd0gk/4/

などのように見える変化した後

$('#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%" } 
     ] 
}); 

を変更

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; 
} 

次追加した列幅については Working example here

応答可能なデータテーブルを持つ列に？

Answer 1

の変更次のようにCSS：

@media screen and (min-width : your_target_screen_size px) 
 
{ 
 
    table.table-bordered.dataTable th, table.table-bordered.dataTable td { 
 
    ... 
 
    } 
 
}

と

<meta name="viewport" content="width=device-width" />

のhtml頭にメタタグを追加しました