Xử lý bảng đáp ứng trong Twitter Bootstrap

Khi chiều rộng của bảng vượt quá chiều rộng của span, như trang này: http://jsfiddle.net/rcHdC/

Bạn sẽ thấy nội dung của bảng nằm ngoài span.

Phương pháp tốt nhất để giải quyết trường hợp này là gì?

Bootstrap 3 hiện đã có sẵn các bảng Đáp ứng. Hoan hô! :)

Bạn có thể kiểm tra nó tại đây: https://getbootstrap.com/docs/3.3/css/#tables-responsive

Thêm một <div class="table-responsive">xung quanh bảng của bạn và bạn sẽ sẵn sàng:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Để làm cho nó hoạt động trên tất cả các bố cục, bạn có thể làm như sau:

.table-responsive
{
    overflow-x: auto;
}

Một tùy chọn có sẵn là fooTable. Hoạt động tốt trên trang web Đáp ứng và cho phép bạn thiết lập nhiều điểm ngắt ... fooTable Link

Có nhiều điều khác nhau bạn có thể làm khi xử lý các bảng đáp ứng.

Cá nhân tôi thích cách tiếp cận này của Chris Coyier:

• http://css-tricks.com/responsive-data-tables/

Bạn có thể tìm thấy nhiều lựa chọn thay thế khác tại đây:

• http://css-tricks.com/responsive-data-table-roundup/
• http://bradfrost.github.io/this-is-responsive/patterns.html#tables

Nếu bạn có thể tận dụng Bootstrap và nhanh chóng nhận được thứ gì đó, bạn có thể chỉ cần sử dụng tên lớp ".hidden-phone" và ".hiised-tablet" để ẩn một số hàng nhưng phương pháp này có thể là tốt nhất trong nhiều trường hợp. Thông tin thêm (xem "Các lớp tiện ích đáp ứng"):

• http://twitter.github.io/bootstrap/scaffolding.html#responsive

Nếu bạn đang sử dụng Bootstrap 3 trở xuống, bạn có thể áp dụng các bảng đáp ứng cho tất cả các độ phân giải bằng cách cập nhật tệp:

tables.less

hoặc ghi đè phần này:

@media (max-width: @screen-xs) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid @table-border-color;

    // Tighten up spacing and give a background color
    > .table {
      margin-bottom: 0;
      background-color: #fff;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}

Với:

@media (max-width: @screen-lg) {
  .table-responsive {
    width: 100%;
...

Lưu ý cách tôi đã thay đổi giá trị dòng đầu tiên @ screen-XX.

Tôi biết việc làm cho tất cả các bảng trở nên phản hồi có vẻ không tốt, nhưng tôi thấy điều này cực kỳ hữu ích khi bật tính năng này lên LG trên các bảng lớn (nhiều cột).

Hy vọng nó sẽ giúp một ai đó.