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.

相关标签:

Answer 1

You can wrap your table around the div tag like this as it helped me too.

<div class="col-md-3">

<table>
</table>

</div>

Answer 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.

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;
        }
    }
}

Answer 3

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>

Answer 4

Make a class that will fit table cell width to content

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

Answer 5

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

Answer 6

<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>