JS JQuery Bootstrap datatables resize

Question

こんにちは私は10列を表示するデータテーブルを持っていますが、問題はそれが適切に画面に適合しないということです。他の列や行を表示するには、横方向と縦方向にスクロールする必要があります。私がしたいのは、テーブルを小さくすることです。それをどうすれば実現できますか？スクリーンショットhereとhereを参照してください。私はテーブル幅= "100％"を設定しようとしましたが、残念ながら何も起こりません。 HTML specパー

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12"> 
 

 
\t \t \t \t <center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center> 
 

 
\t \t \t \t <div class="removeMessages"></div> 
 

 
\t \t \t \t <button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-plus-sign"></span> \t Add Member 
 
\t \t \t \t </button> 
 

 
\t \t \t \t <br /> <br /> <br /> 
 

 
\t \t \t \t <table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable"> \t \t \t \t \t 
 
\t \t \t \t \t <thead> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>ID #</th> 
 
\t \t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t \t <th>Last Name</th> 
 
\t \t \t \t \t \t \t <th>License Number</th> 
 
\t \t \t \t \t \t \t <th>Violation</th> 
 
\t \t \t \t \t \t \t <th>Arrest Place</th> \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <th>Address</th> 
 
\t \t \t \t \t \t \t <th>Plate Number</th> 
 
\t \t \t \t \t \t \t <th>Contact Number</th> 
 
\t \t \t \t \t \t \t <th>Officer Name</th> 
 
\t \t \t \t \t \t \t <th>Date&Time</th> \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <th>Paid</th> 
 
\t \t \t \t \t \t \t <th>Option</th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </thead> 
 
\t \t \t \t </table> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>