title: CSS Bootstrap Table
body: <p>How to restrict width to each column of bootstrap table?
  I tried to play around but I cant seem to shrink the column.</p>
  
  <p><a href="https://plnkr.co/edit/XhwIUynVgAxMBpJo8x8N?p=preview" rel="nofollow">https://plnkr.co/edit/XhwIUynVgAxMBpJo8x8N?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;h2&gt;Table&lt;/h2&gt;
        &lt;p&gt;The .table class adds basic styling (light padding and only horizontal dividers) to a table:&lt;/p&gt;
        &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th style="width:20px"&gt;Firstname&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Anna&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;2&lt;/td&gt;
              &lt;td&gt;Debbie&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;3&lt;/td&gt;
              &lt;td&gt;John&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>