title: JS JQuery Bootstrap datatables resize
body: <p>Hi I have a datatable that displays 10 columns but the problem is it dont fit the screen properly. I still need to scroll horizontally and vertically to see the other columns/rows. What I want to do is to make the table smaller. How can I achieve that? Refer to the screenshots <a href="https://i.stack.imgur.com/L91JR.png" rel="nofollow noreferrer">here</a> and <a href="https://i.stack.imgur.com/xrcl9.png" rel="nofollow noreferrer">here</a> . I have tried setting table width = "100%" but unfortunately nothing happens. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
      &lt;div class="container"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-12"&gt;
  
      &lt;center&gt;&lt;h1 class="page-header"&gt;TMTRO Iloilo &lt;small&gt;Violators Records&lt;/small&gt; &lt;/h1&gt;&lt;/center&gt;
  
      &lt;div class="removeMessages"&gt;&lt;/div&gt;
  
      &lt;button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn"&gt;
       &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt; Add Member
      &lt;/button&gt;
  
      &lt;br /&gt; &lt;br /&gt; &lt;br /&gt;
  
      &lt;table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable"&gt;     
       &lt;thead&gt;
        &lt;tr&gt;
         &lt;th&gt;ID #&lt;/th&gt;
         &lt;th&gt;Name&lt;/th&gt;
         &lt;th&gt;Last Name&lt;/th&gt;
         &lt;th&gt;License Number&lt;/th&gt;
         &lt;th&gt;Violation&lt;/th&gt;
         &lt;th&gt;Arrest Place&lt;/th&gt;            
         &lt;th&gt;Address&lt;/th&gt;
         &lt;th&gt;Plate Number&lt;/th&gt;
         &lt;th&gt;Contact Number&lt;/th&gt;
         &lt;th&gt;Officer Name&lt;/th&gt;
         &lt;th&gt;Date&amp;Time&lt;/th&gt;       
         &lt;th&gt;Paid&lt;/th&gt;
         &lt;th&gt;Option&lt;/th&gt;
        &lt;/tr&gt;
       &lt;/thead&gt;
      &lt;/table&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>