JS JQuery Bootstrap數據表調整大小

Question

嗨我有一個數據表顯示10列，但問題是它不適合屏幕正確。我仍然需要水平和垂直滾動查看其他列/行。我想要做的是讓桌子變小。我怎樣才能做到這一點？請參閱屏幕截圖here和here。我試圖設置表寬=「100％」，但不幸的是沒有任何反應。

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