Making a Bootstrap table column fit to content
HtmlCssTwitter BootstrapHtml Problem Overview
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)
Html Solutions
Solution 1 - Html
Make a class that will fit table cell width to content
.table td.fit,
.table th.fit {
white-space: nowrap;
width: 1%;
}
Solution 2 - Html
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 - Html
Add w-auto native bootstrap 4 class to the table element and your table will fit its content.
Solution 4 - Html
Kind of an old question, but I arrived here looking for this. I wanted the table to be as small as possible, fitting to it's 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 - Html
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>
Solution 6 - Html
You can wrap your table around the div tag like this as it helped me too.
<div class="col-md-3">
<table>
</table>
</div>
Solution 7 - Html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h5>Left</h5>
<table class="table table-responsive">
<tbody>
<tr>
<th>Action</th>
<th>Name</th>
<th>Payment Method</th>
</tr>
<tr>
<td style="width:1px; white-space:nowrap;">
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>
</td>
<td>Bart Foo</td>
<td>Visa</td>
</tr>
</tbody>
</table>
<h5>Right</h5>
<table class="table table-responsive">
<tbody>
<tr>
<th>Name</th>
<th>Payment Method</th>
<th>Action</th>
</tr>
<tr>
<td>Bart Foo</td>
<td>Visa</td>
<td style="width:1px; white-space:nowrap;">
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>
</td>
</tr>
</tbody>
</table>
Solution 8 - Html
None of the provided answers worked for me. If anyone stumbles upon this problem, here's a clean solution which also works with Boostrap 4.6.
By using colgroup, we can adjust the width of entire columns. So we set width to 1% for the columns we want to fit to content. Just make sure to add the appropriate number of col elements for your columns:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<colgroup>
<col>
<col>
<col style="width: 1%;">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Payment Method</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Bart Foo</td>
<td>Visa</td>
<td><a role="button" class="btn btn-primary btn-xs" href="">View</a></td>
</tr>
</tbody>
</table>
</div>
</div>
(added a border to the table to better visualize the result)
If you don't like the inline style you can always move it to a CSS class and apply it to the col element.
Solution 9 - Html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="table-responsive">
<table class="table">
<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>
</div>