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>