title: Making a Bootstrap table column fit to content
body: <p>I'm using Bootstrap, and drawing a table. The rightmost column has a button in it, and I want it to drop down to the minimum size it needs to fit said button.</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;table class="table table-responsive"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Payment Method&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Bart Foo&lt;/td&gt;
                  &lt;td&gt;Visa&lt;/td&gt;
                  &lt;td&gt;&lt;a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg"&gt;View&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This renders like this:</p>
  <p><img src="https://i.stack.imgur.com/vuNSl.jpg" alt="Table Example" /></p>
  <p>With some firebug highlighting, the column width has come out this wide:</p>
  <p><img src="https://i.stack.imgur.com/VmC1E.jpg" alt="Column Width" /></p>
  <p>That column scales with the page, while the page is in the larger dynamic width modes. I have some idea how I'd go about fixing this in pure CSS, but most of those approaches will probably cause issues with the low width versions of the site.</p>
  <p>How would I make that column drop down to the width of its contents?</p>
  <p><em>(As ever - Existing bootstrap classes &gt; pure CSS &gt; Javascript)</em></p>