Tạo cột bảng Bootstrap vừa với nội dung

Tôi đang sử dụng Bootstrap và vẽ một bảng. Cột ngoài cùng bên phải có một nút và tôi muốn nó giảm xuống kích thước tối thiểu mà nó cần để vừa với nút đã nói.

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

Điều này hiển thị như thế này:

Với một số tô sáng bằng firebug, chiều rộng cột đã rộng ra như thế này:

Cột đó cân đối với trang, trong khi trang ở chế độ độ rộng động lớn hơn. Tôi có một số ý tưởng về cách sửa lỗi này trong CSS thuần túy, nhưng hầu hết các cách tiếp cận đó có thể sẽ gây ra sự cố với các phiên bản chiều rộng thấp của trang web.

Làm cách nào để làm cho cột đó giảm xuống bằng chiều rộng của nội dung?

(Như mọi khi - Các lớp bootstrap hiện có> CSS thuần túy> Javascript)

Tạo một lớp phù hợp với chiều rộng ô bảng với nội dung

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

Không có giải pháp nào phù hợp với tôi. Các tdcột cuối cùng vẫn mất toàn bộ chiều rộng. Vì vậy, đây là giải pháp hoạt động. Đã thử nghiệm trên Bootstrap 4

Thêm table-fitvào của bạntable

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

Đây là một để sasssử dụng.

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

Một câu hỏi cũ, nhưng tôi đến đây để tìm câu hỏi này. Tôi muốn cái bàn càng nhỏ càng tốt, vừa với đồ đạc của nó. Giải pháp là chỉ cần đặt chiều rộng bảng thành một số nhỏ tùy ý (1px chẳng hạn). Tôi thậm chí đã tạo một lớp CSS để xử lý nó:

.table-fit {
    width: 1px;
}

Và sử dụng nó như vậy:

<table class="table table-fit">

Ví dụ: JSFiddle

Thêm w-auto mẹ đẻ bootstrap 4 lớp với bảng thành phần và bảng của bạn sẽ phù hợp với nội dung của nó.

Giải pháp này không phải lần nào cũng tốt. Nhưng tôi chỉ có hai cột và tôi muốn cột thứ hai chiếm hết không gian còn lại. Điều này đã làm việc cho tôi

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

Bạn có thể quấn bảng của mình xung quanh thẻ div như thế này vì nó cũng giúp tôi.

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

<table>
</table>

</div>