title: Bootstrap table custom width on each column
body: <p>How to set the width of bootstrap table?</p>
  
  <p>I tried to use <code>class="col-md-2"</code>, it does not effect the width. The table class seems to have its width equal to display width.</p>
  
  <p>In my case, i have a lot of information to be displayed through the table which is will exceeded the width of the display, hence i need to have the horizontal scrollbar.</p>
  
  <p>This is the last code i have tried.</p>
  
  <pre><code>&lt;table class="table"&gt; 
      &lt;tr&gt;
          &lt;th class="col-md-1"&gt;Action&lt;/th&gt;
          &lt;th class="col-md-2"&gt;Description&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="x in Tablelist track by $index"&gt;
         &lt;td&gt;
             &lt;div class="btn-group"&gt;
                 &lt;button class="btn btn-primary btn-xs" ng-click="Opensetprice(x.id,x.matcode,x.pr_qty)"&gt;$&lt;/button&gt;
                 &lt;button class="btn btn-danger btn-xs" ng-click="Delete(x.doc_no,x.item_no, $index)"&gt;X&lt;/button&gt;
             &lt;/div&gt;
         &lt;/td&gt;
         &lt;td&gt;{{x.material}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>tried to override the class <code>table</code> width with <code>width:auto;</code>, does not do any help.</p>