Bootstrap 4 bảng đáp ứng sẽ không chiếm 100% chiều rộng

96

Tôi đang xây dựng một ứng dụng web bằng Bootstrap 4 và gặp phải một số vấn đề kỳ lạ. Tôi muốn sử dụng lớp đáp ứng bảng của Bootstrap để cho phép cuộn ngang các bảng trên thiết bị di động. Trên các thiết bị máy tính để bàn, bảng phải chiếm 100% chiều rộng chứa DIV.

Ngay sau khi tôi áp dụng lớp .table-responsive vào bảng của mình, bảng sẽ thu nhỏ theo chiều ngang và không còn chiếm 100% chiều rộng nữa. Bất kỳ ý tưởng?

Đây là đánh dấu của tôi:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Nếu tôi áp dụng chiều rộng 100% cho lớp .table-responsive, nó sẽ làm cho bảng có chiều rộng 100% nhưng các phần tử con (TBODY, TR, v.v.) vẫn hẹp.

css bootstrap-4

— ăn-ngủ-mã
nguồn

158

Sau đây KHÔNG LÀM VIỆC. Nó gây ra một vấn đề khác. Bây giờ nó sẽ có chiều rộng 100% nhưng nó sẽ không phản hồi trên các thiết bị nhỏ hơn:

.table-responsive {
    display: table;
}

Tất cả những câu trả lời này đã giới thiệu một vấn đề khác bằng cách đề xuất display: table;. Giải pháp duy nhất lúc này là sử dụng nó như một trình bao bọc:

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

— John FatBoy Doeeee Rolla
nguồn

2

Băn khoăn với điều này mãi mãi - còn quá sớm để nghĩ về việc gói gọn nó lại. Người đàn ông của bạn

— JSF

Sử dụng table-responsivelớp làm trình bao bọc sẽ quay trở lại Bootstrap 3 ...? Rất vui khi có một giải pháp cho bây giờ! Bootstrap 4 Alpha ;-)

— Steve Meisner

Không thấy điều này hoạt động với bản beta. Có vẻ như bạn sẽ cần xóa div và thêm "table-responsive" cùng với "table". Như vậy .. <table class = "table table-responsive">

— Winnemucca

vấn đề này vẫn chưa được giải quyết trong bootstrap 4, mặc dù một phần đồng ý với câu trả lời của bạn, hướng dẫn di chuyển từ bootstrap 3 sang trạng thái 4: "bảng đáp ứng không còn yêu cầu phần tử bao bọc nữa. Thay vào đó, chỉ cần đặt .table-responsive ngay trên <table>. "... được tìm thấy ở đây: getbootstrap.com/docs/4.0/migration/#tables

— Marin,

Hoạt động hoàn hảo cho tôi trên phiên bản 4.3.1! Cảm ơn bạn

— Ibrahim Isa

38

Giải pháp này đã làm việc cho tôi:

chỉ cần thêm một lớp khác vào phần tử bảng của bạn: w-100 d-block d-md-table

vì vậy nó sẽ là: <table class="table table-responsive w-100 d-block d-md-table">

cho bootstrap 4, w-100hãy đặt chiều rộng thành 100% d-block(display: block) và d-md-table(display: table on min-width: 576px)

Tài liệu hiển thị Bootstrap 4

— Faytraneozter
nguồn

2

Hoạt động cho Bootstrap4 Beta! Chìa khóa là w-100. cảm ơn bạn.

— ObjectiveTC

Giải pháp này không có tác dụng như vừa làm <table class="table table-responsive-md">?

— JamesWilson

20

Nếu bạn đang sử dụng V4.1 và theo tài liệu của họ, không chỉ định trực tiếp .table-responsive cho bảng. Bảng phải là .table và nếu bạn muốn nó có thể cuộn theo chiều ngang (đáp ứng), hãy thêm nó vào bên trong vùng chứa .table-responsive ( <div>ví dụ: a).

Các bảng đáp ứng cho phép các bảng được cuộn theo chiều ngang một cách dễ dàng. Làm cho bất kỳ bảng nào phản hồi trên tất cả các chế độ xem bằng cách bao bọc .table bằng .table-responsive.

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

làm điều đó, không cần thêm css.

Trong mã của OP, .table-responsive có thể được sử dụng cùng với .col-md-12 ở bên ngoài.

— Marcelo Myara
nguồn

3

Đây được cho là câu trả lời đúng vì phiên bản ổn định của bootstrap. Thx

— Peter

2

Đây là câu trả lời. Cảm ơn bạn

— Gjaa

1

Câu trả lời chính xác!

— Andrew Schultz

6

Vì một số lý do, bảng đáp ứng nói riêng không hoạt động như bình thường. Bạn có thể vá nó bằng cách loại bỏdisplay:block;

.table-responsive {
    display: table;
}

Tôi có thể gửi một báo cáo lỗi.

Biên tập:

Đó là một lỗi hiện có.

— Serg Chernata
nguồn

5

Không có câu trả lời nào trong số này hoạt động (ngày hôm nay, ngày 9 tháng 12 năm 2018). Giải pháp chính xác ở đây là thêm .table-responsive-sm vào bảng của bạn:

<table class='table table-responsive-sm'>
[Your table]
</table>

Điều này chỉ áp dụng khía cạnh đáp ứng cho chế độ xem SM (thiết bị di động). Vì vậy, trong chế độ xem trên thiết bị di động, bạn sẽ cuộn như mong muốn và trong các chế độ xem lớn hơn, bảng không phản hồi và do đó được hiển thị toàn bộ chiều rộng như mong muốn.

Tài liệu: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

— SongBox
nguồn

2

Giải pháp phù hợp với v4 của khuôn khổ là đặt điểm ngắt thích hợp. Thay vì sử dụng .table-responsive, bạn có thể sử dụng .table-responsive-sm (chỉ đáp ứng trên các thiết bị nhỏ)

Bạn có thể sử dụng bất kỳ điểm cuối nào có sẵn: table-responsive {-sm | -md | -lg | -xl}

— Rubén_ic
nguồn

1

Đó là bởi vì .table-responsivelớp thêm thuộc tính display: blockvào phần tử của bạn, điều này sẽ thay đổi nó so với trước đó display: table.

Ghi đè thuộc tính này trở lại display: tabletrong biểu định kiểu của riêng bạn

.table-responsive {
    display: table;
}

Lưu ý: đảm bảo rằng kiểu này thực thi sau mã bootstrap của bạn để nó ghi đè.

— Nikhil Nanjappa
nguồn

1

Nguyên nhân là do table-responsivelớp cung cấp cho bảng một thuộc tính display:block, điều này thật kỳ lạ vì điều này ghi đè lên các tablelớp ban đầu display:tablevà là lý do tại sao bảng thu nhỏ khi bạn thêm table-responsive.

Nhiều khả năng nó xuống bootstrap 4 vẫn còn trong nhà phát triển. Bạn có thể an toàn khi ghi đè thuộc tính này bằng lớp của riêng bạn đã đặt display:tablevà nó sẽ không ảnh hưởng đến khả năng phản hồi của bảng.

ví dụ

.table-responsive-fix{
   display:table;
}

— Callum
nguồn

1

Cân nhắc các câu trả lời khác, tôi sẽ làm một cái gì đó như thế này, cảm ơn!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

— Alexis
nguồn

1

Tạo bảng đáp ứng bằng cách gói bất kỳ .table nào bằng .table-responsive {-sm | -md | -lg | -xl}, làm cho bảng cuộn theo chiều ngang tại mỗi điểm ngắt có chiều rộng tối đa lên đến (nhưng không bao gồm) 576px, 768px, 992px và 1120px, tương ứng.

chỉ cần bọc bảng bằng .table-responsive {-sm | -md | -lg | -xl}

ví dụ

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

bootstrap 4 bảng

— iMezied
nguồn

0

Tôi nhận thấy rằng việc sử dụng lớp đáp ứng bảng được đề xuất trong trình bao bọc vẫn khiến các bảng đáp ứng thu hẹp (đáng ngạc nhiên) theo chiều ngang:

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

Giải pháp cho tôi là tạo các điểm ngắt phương tiện và lớp sau để ngăn chặn nó:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Sau đó, tôi có thể thêm lớp thích hợp vào phần tử bảng của mình. Ví dụ:

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

Ở đây trình bao bọc đặt chiều rộng thành 100% cho lớn hơn và lớn hơn trên mỗi Bootstrap. Với lớp table-lg được áp dụng cho phần tử bảng, chiều rộng bảng cũng được đặt thành 100% cho lớn và lớn hơn, nhưng được đặt thành 992px cho trung bình và nhỏ hơn. Các lớp table-xs, table-sm, table-md và table-xl hoạt động theo cùng một cách.

— ScottyB
nguồn

0

Đối với Bootstrap 4.x, hãy sử dụng các tiện ích hiển thị:

w-100 d-print-block d-print-table

Cách sử dụng :

<table class="table w-100 d-print-block d-print-table">

— Bora
nguồn

0

Có vẻ như phần tử "chỉ sr" và các kiểu của nó bên trong bảng là nguyên nhân gây ra lỗi này. Ít nhất thì tôi cũng gặp phải vấn đề tương tự và sau nhiều tháng đập đầu vào tường, chúng tôi đã xác định được nguyên nhân là do đâu, mặc dù tôi vẫn không hiểu tại sao. Việc thêm left:0vào các kiểu "chỉ sr" đã sửa nó.

— Bryn Newell
nguồn