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">_x000D_
<table class="table table-responsive">_x000D_
<tbody>_x000D_
<tr>_x000D_
<th>Name</th>_x000D_
<th>Payment Method</th>_x000D_
<th></th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Bart Foo</td>_x000D_
<td>Visa</td>_x000D_
<td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
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 it's contents?
(As ever - Existing bootstrap classes > pure CSS > Javascript)
This question is related to
html
css
twitter-bootstrap
None of the solution works for me. The td
last column still takes the full width. So here's the solution works.
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;
}
Here's the one for sass
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;
}
}
}
You can wrap your table around the div tag like this as it helped me too.
<div class="col-md-3">
<table>
</table>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />_x000D_
_x000D_
<h5>Left</h5>_x000D_
<table class="table table-responsive">_x000D_
<tbody>_x000D_
<tr>_x000D_
<th>Action</th> _x000D_
<th>Name</th>_x000D_
<th>Payment Method</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td style="width:1px; white-space:nowrap;">_x000D_
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>_x000D_
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>_x000D_
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a> _x000D_
</td> _x000D_
<td>Bart Foo</td>_x000D_
<td>Visa</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
<h5>Right</h5>_x000D_
_x000D_
<table class="table table-responsive">_x000D_
<tbody>_x000D_
<tr> _x000D_
<th>Name</th>_x000D_
<th>Payment Method</th>_x000D_
<th>Action</th> _x000D_
</tr>_x000D_
<tr>_x000D_
_x000D_
<td>Bart Foo</td>_x000D_
<td>Visa</td>_x000D_
<td style="width:1px; white-space:nowrap;">_x000D_
<a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>_x000D_
<a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>_x000D_
<a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a> _x000D_
</td> _x000D_
</tr>_x000D_
</tbody>_x000D_
</table>
_x000D_
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>
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
Source: Stackoverflow.com