Các bảng của tôi hiển thị tốt trên máy tính để bàn, nhưng khi tôi cố gắng xem phiên bản di động, bảng của tôi sẽ quá rộng so với màn hình thiết bị di động. Tôi đang sử dụng một bố cục đáp ứng.
Làm cách nào để đặt chiều rộng bảng cho chế độ xem trên thiết bị di động? Có những lựa chọn thay thế nào khác để trình bày dữ liệu dạng bảng trên các chế độ xem di động bằng Bootstrap?
Câu trả lời:
Bootstrap 3 giới thiệu các bảng đáp ứng :
<div class="table-responsive">
<table class="table">
...
</table>
</div>Bootstrap 4 cũng tương tự, nhưng có nhiều quyền kiểm soát hơn thông qua một số lớp mới :
... đáp ứng trên tất cả các chế độ xem ... với
.table-responsive. Hoặc, chọn một điểm ngắt tối đa để có bảng đáp ứng bằng cách sử dụng.table-responsive{-sm|-md|-lg|-xl}.
Tín dụng cho Jason Bradley vì đã cung cấp một ví dụ:
table-responsivelớp học làm gì? Tài liệu Bootstrap nói "làm cho chúng cuộn theo chiều ngang", nhưng tôi không nhận thấy sự khác biệt liên quan đến việc cuộn. Sự khác biệt duy nhất tôi nhận thấy là bảng có đường viền bên ngoài khi ở dưới một kích thước màn hình nhất định ( như trong ví dụ ).
.table-responsivevào chính bảng (ví dụ <table class="table table-responsive">), thay vì bao bọc bảng .table-responsive, mà bạn thậm chí đã chỉ ra trong ví dụ của mình.
hidden-*trên các tdcột bạn muốn ẩn getbootstrap.com/docs/3.3/css/#responsive-utilities
Bạn cũng có thể cân nhắc thử một trong những cách tiếp cận này, vì các bảng lớn hơn không chính xác thân thiện với thiết bị di động ngay cả khi nó hoạt động:
http://elvery.net/demo/responsive-tables/
Tôi là một phần của 'No More Tables' nhưng điều đó rõ ràng phụ thuộc vào ứng dụng của bạn.
Tất cả các bảng trong bootstrap kéo dài theo vùng chứa mà chúng ở trong. Bạn có thể đặt các bảng của mình bên trong một .spanphần tử để kiểm soát kích thước. Câu hỏi SO này có thể giúp bạn