Octopoid Octopoid - 10 months ago 90
HTML Question

Making a Bootstrap table column fit to content

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.

<table class="table table-responsive">
<th>Payment Method</th>
<td>Bart Foo</td>
<td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>

This renders like this:

Table Example

With some firebug highlighting, the column width has come out this wide:

Column Width

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.

How would I make that column drop down to the width of it's contents?

(As ever - Existing bootstrap classes > pure CSS > Javascript)

tmg tmg
Answer Source

Make a class that will fit table cell width to content

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;