htmlcsstwitter-bootstrap

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.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-responsive">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Payment Method</th>
                <th></th>
            </tr>
            <tr>
                <td>Bart Foo</td>
                <td>Visa</td>
                <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>
            </tr>
        </tbody>
    </table>

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 its contents?

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

Solution

  • Make a class that will fit table cell width to the content

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