Tabel responsif Bootstrap 4 tidak akan menggunakan lebar 100%

97

Saya sedang membangun aplikasi web menggunakan Bootstrap 4 dan mengalami beberapa masalah aneh. Saya ingin menggunakan kelas responsif tabel Bootstrap untuk memungkinkan pengguliran horizontal tabel pada perangkat seluler. Pada perangkat desktop, tabel harus 100% dari lebar DIV penampung.

Segera setelah saya menerapkan kelas .table-responsive ke tabel saya, tabel menyusut secara horizontal dan tidak lagi memakan 100% lebarnya. Ada ide?

Ini markup saya:

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

Jika saya menerapkan lebar 100% ke kelas .table-responsive, itu membuat tabel itu sendiri menjadi 100% lebar tetapi elemen turunan (TBODY, TR, dll.) Masih sempit.

css bootstrap-4 makan-tidur-kode
sumber

Jawaban:

158

Berikut TIDAK AKAN BEKERJA. Ini menyebabkan masalah lain. Sekarang akan melakukan 100% lebar tetapi tidak akan responsif pada perangkat yang lebih kecil:

.table-responsive {
    display: table;
}

Semua jawaban ini menimbulkan masalah lain dengan merekomendasikan display: table;. Satu-satunya solusi saat ini adalah menggunakannya sebagai pembungkus:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
John FatBoy Doeeee Rolla
sumber
2
Merasa gelisah selamanya - terlalu dini untuk berpikir tentang membungkusnya. Laki-laki Anda
JSF
Menggunakan table-responsivekelas sebagai pembungkus kembali ke Bootstrap 3 ...? Senang ada solusi untuk saat ini! Bootstrap 4 Alpha ;-)
Steve Meisner
Tidak melihat ini berfungsi dengan beta. Sepertinya Anda perlu menghapus div dan menambahkan "tabel-responsif" di sepanjang "tabel". Seperti begitu .. <table class = "table table-responsive">
Winnemucca
masalah ini masih belum terselesaikan di bootstrap 4, meskipun satu bagian dari setuju dengan jawaban Anda, instruksi migrasi dari bootstrap 3 ke 4 menyatakan: "tabel responsif tidak lagi memerlukan elemen pembungkus. Sebagai gantinya, cukup letakkan .table-responsive tepat di <table>. "... ditemukan di sini: getbootstrap.com/docs/4.0/migration/#tables
Marin
Bekerja dengan sempurna untuk saya pada versi 4.3.1! Terima kasih
Ibrahim Isa
38

Solusi ini berhasil untuk saya:

cukup tambahkan kelas lain ke elemen tabel Anda: w-100 d-block d-md-table

jadi itu akan menjadi: <table class="table table-responsive w-100 d-block d-md-table">

untuk bootstrap 4 w-100atur lebar menjadi 100% d-block(display: block) dan d-md-table(display: table on min-width: 576px)

Bootstrap 4 menampilkan dokumen

Faytraneozter
sumber
2
Bekerja untuk Bootstrap4 Beta! Kuncinya adalah w-100. Terima kasih.
ObjectiveTC
Apakah solusi ini tidak memiliki efek yang sama dengan hanya melakukan <table class="table table-responsive-md">?
JamesWilson
21

Jika Anda menggunakan V4.1, dan menurut dokumennya, jangan tetapkan .table-responsive langsung ke tabel. Tabel harus .table dan jika Anda ingin dapat di-scroll secara horizontal (responsif), tambahkan di dalam container .table-responsive ( <div>misalnya).

Tabel responsif memungkinkan tabel digulir secara horizontal dengan mudah. Buat tabel menjadi responsif di semua area pandang dengan menggabungkan .table dengan .table-responsive.

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

melakukan itu, tidak diperlukan css tambahan.

Dalam kode OP, .table-responsive dapat digunakan bersama dengan .col-md-12 di bagian luar.

Marcelo Myara
sumber
3
Ini seharusnya menjadi jawaban yang benar karena versi bootstrap yang stabil. Thx
Peter
2
Inilah jawabannya. Terima kasih
Gjaa
1
Jawaban yang benar!
Andrew Schultz
6

Untuk beberapa alasan tabel responsif khususnya tidak berperilaku sebagaimana mestinya. Anda dapat menambalnya dengan menyingkirkandisplay:block;

.table-responsive {
    display: table;
}

Saya mungkin mengajukan laporan bug.

Edit:

Ini adalah bug yang sudah ada.

Serg Chernata
sumber
5

Tak satu pun dari jawaban ini yang berhasil (tanggal 9 Desember 2018 hari ini). Resolusi yang benar di sini adalah menambahkan .table-responsive-sm ke tabel Anda:

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

Ini menerapkan aspek responsivitas hanya untuk tampilan SM (seluler). Jadi dalam tampilan seluler Anda mendapatkan pengguliran sesuai keinginan dan dalam tampilan yang lebih besar, tabel tidak responsif dan karenanya ditampilkan dengan lebar penuh, seperti yang diinginkan.

Dokumen: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Kotak Lagu
sumber
2

Solusi yang sesuai dengan kerangka v4 adalah dengan menetapkan breakpoint yang tepat. Daripada menggunakan .table-responsive, Anda harus bisa menggunakan .table-responsive-sm (hanya responsif di perangkat kecil)

Anda dapat menggunakan salah satu endpoint yang tersedia: table-responsive {-sm | -md | -lg | -xl}

Rubén_ic
sumber
1

Itu karena .table-responsivekelas menambahkan properti display: blockke elemen Anda yang mengubahnya dari sebelumnya display: table.

Ganti properti ini kembali ke display: tabledalam lembar gaya Anda sendiri

.table-responsive {
    display: table;
}

Catatan: pastikan gaya ini dijalankan setelah kode bootstrap Anda untuk diganti.

Nikhil Nanjappa
sumber
1

Ini disebabkan oleh table-responsivekelas yang memberikan properti pada tabel display:block, yang aneh karena ini menimpa tablekelas yang asli display:tabledan itulah sebabnya tabel menyusut saat Anda menambahkan table-responsive.

Kemungkinan besar karena bootstrap 4 masih dalam dev. Anda aman menimpa properti ini dengan kelas Anda sendiri yang disetel display:tabledan itu tidak akan mempengaruhi daya tanggap tabel.

misalnya

.table-responsive-fix{
   display:table;
}
Callum
sumber
1

Mempertimbangkan jawaban lain, saya akan melakukan sesuatu seperti ini, terima kasih!

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

Buat tabel responsif dengan menggabungkan .table apa pun dengan .table-responsive {-sm | -md | -lg | -xl}, membuat tabel di-scroll secara horizontal pada setiap breakpoint lebar-maks hingga (tetapi tidak termasuk) 576px, 768px, 992px, dan 1120px, masing-masing.

cukup bungkus tabel dengan .table-responsive {-sm | -md | -lg | -xl}

sebagai contoh 

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

bootstrap 4 tabel

iMezied
sumber
0

Saya menemukan bahwa menggunakan kelas responsif tabel yang direkomendasikan dalam pembungkus masih menyebabkan tabel responsif (secara mengejutkan) menyusut secara horizontal:

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

Solusi bagi saya adalah membuat breakpoint media dan kelas berikut untuk mencegahnya:

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

Kemudian saya dapat menambahkan kelas yang sesuai ke elemen tabel saya. Sebagai contoh:

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

Di sini pembungkus mengatur lebar menjadi 100% untuk besar dan lebih besar per Bootstrap. Dengan kelas tabel-lg diterapkan ke elemen tabel, lebar tabel juga disetel ke 100% untuk besar dan lebih besar, tetapi disetel ke 992 piksel untuk sedang dan lebih kecil. Kelas table-xs, table-sm, table-md, dan table-xl bekerja dengan cara yang sama.

ScottyB
sumber
0

Untuk Bootstrap 4.x gunakan utilitas tampilan:

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

Penggunaan :

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

Tampaknya elemen "hanya sr" dan gayanya di dalam tabel adalah penyebab bug ini. Setidaknya saya memiliki masalah yang sama dan setelah berbulan-bulan membenturkan kepala kami ke dinding itulah yang kami tentukan penyebabnya, meskipun saya masih tidak mengerti mengapa. Menambahkan left:0ke gaya "hanya sr" memperbaikinya.

Bryn Newell
sumber