Making a Bootstrap table column fit to content

Question

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:

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

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 1

Make a class that will fit table cell width to content

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

Solution 2

Tested on Bootstrap 4.5 and 5.0

None of the solution works for me. The td last column still takes the full width. So here's the solution works.

CSS

Add table-fit to your table

table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}

Scss

Here's the one for scss uses.

@mixin width {
    width: auto !important;
}
table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th, tfoot th  {
            @include width;
        }
        tbody td, tfoot td {
            @include width;
        }
    }
}

Solution 3

Add w-auto native bootstrap 4 class to the table element and your table will fit its content.

Solution 4

Kind of an old question, but I arrived here looking for this. I wanted the table to be as small as possible, fitting to its contents. The solution was to simply set the table width to an arbitrary small number (1px for example). I even created a CSS class to handle it:

.table-fit {
    width: 1px;
}

And use it like so:

<table class="table table-fit">

Example: JSFiddle

Bootstrap 4 example with adjusted CSS

.table-fit {
  width: 1px!important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<h3>Regular Table</h3>
<table class="table table-bordered">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
</table>
<h3>Compact Table</h3>
<table class="table table-bordered table-fit">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
</table>

Solution 5

This solution is not good every time. But i have only two columns and I want second column to take all the remaining space. This worked for me

 <tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>

View more solutions

Comments

[Octopoid]

Having posted this, I've just had a thought - if I just right align that column, I guess that's about the same - if the other columns have enough data in them to need the space, they'll claw it back anyway. EDIT: Doh - this doesn't work where I have more than one column I need to drop down to a minimum size.

[Octopoid]

Thats true for layout, but tables are absolutely fine for tabular data.

[sqe]

You should use divs instead of tables. You then could assign percentage values for their widths to match the page width.

[gewh]

Tables should not be used for structure. You can use tables for data that usually goes into tables. Octopoid is not using the table tag for structure, it is being used to display data. It is a correct use of the table tag.

[Octopoid]

Gah - I'd put this in a td rule then applied it to a th - that works perfectly, thanks. :) (Hope you don't mind, I added the th rule into your answer too)

[GabiM]

The question is reffering to only some columns of a table, not to all columns of the table

[Pedro Walter]

Yeah, but needing to find a solution to my problem, I arrived here. I explained this in my answer.

[Maritim]

It's still an inappropriate and incorrect answer to this question.

[TheWiz]

this is the only solution that works with bs4. Thanks a ton!

[paperduck]

This one worked for me in Firefox, and it's an actual Boostrap solution.

[Klaassiek]

Hey, welcome to this place! When leaving answers please also make sure to not only leave a piece of code. It is also important to explain what the code does, to clear things up.

[lsek]

If you compare my code with the provided code you will see the difference. My answer is not lonely without explain. So don't dismiss it.

[Rony Varghese]

This is the best solution

[Alex78191]

why not width: 1%;?

[Mark Schultheiss]

This is really the same as the accepted answer except injected as a style= attribute - not saying this is not a valid answer but just calling that out for others who visit this.

[Mark Schultheiss]

This fails to address the question - make the rightmost column width as small as the button width.

[Mark Schultheiss]

I made adjusted Bootstrap 4 snippet of your sample (needed the !important)

[James Bond]

But OP needs that only the rightest column have auto width, not all columns...

[isherwood]

You shouldn't expect everyone to compare line-by-line to see what you're proposing as a solution. See How to Answer.