Tại sao các bảng Twitter Bootstrap luôn có chiều rộng 100%?

Giả sử đánh dấu này:

<table class="table table-bordered" align="center"> 

Không có bao nhiêu ô tôi có, bảng luôn có chiều rộng 100%. Tại sao vậy

Tất cả các bảng trong bootstrap trải dài theo thùng chứa của chúng, bạn có thể dễ dàng thực hiện bằng cách đặt bảng của mình bên trong một .span*phần tử lưới mà bạn chọn. Nếu bạn muốn xóa thuộc tính này, bạn có thể tạo lớp bảng của riêng mình và chỉ cần thêm nó vào bảng bạn muốn mở rộng với nội dung trong:

.table-nonfluid {
   width: auto !important;
}

Bạn có thể thêm lớp này vào trong biểu định kiểu của riêng bạn và chỉ cần thêm nó vào thùng chứa của bảng như vậy:

<table class="table table-nonfluid"> ... </table>

Bằng cách này, thay đổi của bạn sẽ không ảnh hưởng đến bản định kiểu bootstrap (bạn có thể muốn có một bảng chất lỏng ở một nơi khác trong tài liệu của mình).

<table style="width: auto;" ...hoạt động tốt Đã thử nghiệm trong Chrome 38, IE 11 và Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

Nếu bạn đang sử dụng Bootstrap 4, hãy sử dụng .w-auto.

Xem https://getbootstrap.com/docs/4.1/utilities/sizing/

Trả lời 1:

Tại sao phải chiến đấu với nó? Tại sao không chỉ đơn giản là kiểm soát chiều rộng bảng của bạn bằng cách sử dụng lưới bootstrap? Đây là Bootstrap 3 đánh dấu.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Điều này sẽ tạo ra một bảng bằng một nửa (6 trên 12) chiều rộng của phần tử chứa.

Đôi khi tôi sử dụng các kiểu nội tuyến theo các câu trả lời khác, nhưng nó không được khuyến khích.

Câu trả lời số 2:

Nếu bạn đang sử dụng bootstrap 4, nó có một số lớp trợ giúp đẹp cho chiều rộng như:

w-25, w-50, w-75, and w-100

Đây là tài liệu: https://getbootstrap.com/docs/4.0/utilities/sizing/

Tôi đã có cùng một vấn đề, tôi đã sửa bảng và sau đó chỉ định chiều rộng td của tôi. Nếu bạn có th bạn có thể làm những điều đó là tốt.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

Tôi đã không có bất kỳ may mắn với .table-nonfluid.

Tôi đã cố gắng thêm style="width: auto !important"và làm việc tuyệt vời cho tôi!