Bootstrap 4 duyarlı tablolar% 100 genişliğe sahip olmayacak

Question 1

Bootstrap 4 kullanarak bir web uygulaması oluşturuyorum ve bazı tuhaf sorunlarla karşılaşıyorum. Mobil cihazlarda tabloların yatay kaydırılmasına izin vermek için Bootstrap'in tabloya duyarlı sınıfından yararlanmak istiyorum. Masaüstü cihazlarda, tablo, içeren DIV genişliğinin% 100'ünü kaplamalıdır.

.Table-responsive sınıfını masama uyguladığım anda, tablo yatay olarak küçülüyor ve artık genişliğin% 100'ünü kaplamıyor. Herhangi bir fikir?

İşte işaretlemem:

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

.Table-responsive sınıfına% 100 genişlik uygularsam, tablonun kendisini% 100 geniş yapar, ancak alt öğeler (TBODY, TR, vb.) Hala dardır.

Question 2

Aşağıdaki ÇALIŞMAZ. Başka bir soruna neden olur. Şimdi% 100 genişliği yapacak, ancak daha küçük cihazlarda yanıt vermeyecek:

.table-responsive {
    display: table;
}

Tüm bu cevaplar, tavsiye ederek başka bir sorunu ortaya çıkardı display: table;. Şu an itibariyle tek çözüm, onu bir paketleyici olarak kullanmaktır:

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

Question 3

Bu çözüm benim için çalıştı:

sadece tablo öğenize başka bir sınıf ekleyin: w-100 d-block d-md-table

yani şöyle olurdu: <table class="table table-responsive w-100 d-block d-md-table">

önyükleme 4 w-100için genişliği% 100'e ayarlayın d-block(ekran: blok) ved-md-table (ekran: min-genişlikteki tablo: 576 piksel) olarak ayarlayın

Bootstrap 4 görüntüleme belgeleri

Question 4

V4.1 kullanıyorsanız ve belgelerine göre .table-responsive öğesini doğrudan tabloya atamayın. Tablo .table olmalıdır ve yatay olarak kaydırılabilir (duyarlı) olmasını istiyorsanız, bunu .table duyarlı bir kapsayıcı ( <div>örneğin, a) içine ekleyin .

Duyarlı tablolar, tabloların yatay olarak kolaylıkla kaydırılmasına izin verir. Bir .table ile .table-responsive ile sarmalayarak herhangi bir tabloyu tüm görünüm alanlarında duyarlı hale getirin.

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

bunu yapmak için fazladan css gerekmez.

OP'nin kodunda, .table-responsive, dışarıdaki .col-md-12 ile birlikte kullanılabilir.

Question 5

Bazı nedenlerden dolayı, özellikle duyarlı tablo olması gerektiği gibi davranmıyor. Kurtularak yama yapabilirsinizdisplay:block;

.table-responsive {
    display: table;
}

Bir hata raporu sunabilirim.

Düzenle:

Mevcut bir hatadır.

Question 6

Bu yanıtların hiçbiri işe yaramıyor (tarih bugün 9 Aralık 2018). Buradaki doğru çözüm, tablonuza .table-responsive-sm eklemektir:

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

Bu, yanıt verme özelliğini yalnızca SM görünümüne (mobil) uygular. Böylece mobil görünümde kaydırmayı istediğiniz gibi elde edersiniz ve daha büyük görünümlerde tablo yanıt vermez ve bu nedenle istenildiği gibi tam genişlikte görüntülenir.

Dokümanlar: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

Question 7

Çerçevenin v4'ü ile uyumlu çözüm, uygun kesme noktasını ayarlamaktır. .Table-responsive kullanmak yerine, .table-responsive-sm (sadece küçük cihazlarda duyarlı olmak için) kullanabilirsiniz.

Mevcut uç noktalardan herhangi birini kullanabilirsiniz: tabloya duyarlı {-sm | -md | -lg | -xl}

Question 8

Herhangi bir .table'ı .table-duyarlı {-sm | -md | -lg | -xl} ile sarmalayarak, 576px, 768px'e kadar (ancak dahil değil) her maksimum genişlik kesme noktasında tablonun yatay olarak kaydırılmasını sağlayarak duyarlı tablolar oluşturun, Sırasıyla 992px ve 1120px.

tabloyu .table-duyarlı {-sm | -md | -lg | -xl} ile sarmalamanız yeterlidir

Örneğin

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

bootstrap 4 tablo

Question 9

Bunun nedeni, .table-responsivesınıfın özelliği display: blockönceki öğeden değiştiren öğenize eklemesidir.display: table .

Bu özelliği display: tablekendi stil sayfanızda tekrar geçersiz kılın

.table-responsive {
    display: table;
}

Not: Bu stilin, geçersiz kılmak için önyükleme kodunuzdan sonra yürütüldüğünden emin olun.

Question 10

Buna table-responsive, tabloya bir özellik veren sınıf neden olur display:block, bu gariptir çünkü bu, tableorijinal sınıfların üzerine yazar display:tableve bu nedenle tablo eklediğinizde küçülür table-responsive.

Büyük olasılıkla bootstrap 4'e düşüyor, hala geliştirme aşamasında. Kendi sınıfınızı belirleyen bu özelliğin üzerine güvenle yazabilirsiniz display:tableve bu tablonun duyarlılığını etkilemez.

Örneğin

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

Question 11

Diğer cevapları dikkate alarak böyle bir şey yapardım, teşekkürler!

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

Question 12

Bir sarmalayıcıda önerilen tabloya duyarlı sınıfın kullanılmasının, duyarlı tabloların yatay olarak (şaşırtıcı bir şekilde) küçülmesine neden olduğunu buldum:

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

Benim için çözüm, bunu önlemek için aşağıdaki medya kesme noktalarını ve sınıfları oluşturmaktı:

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

Ardından uygun sınıfı tablo elemanıma ekleyebilirim. Örneğin:

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

Burada sarmalayıcı, Bootstrap başına büyük ve daha büyük için genişliği% 100 olarak ayarlar. Tablo öğesine tablo-lg sınıfı uygulandığında, tablo genişliği de büyük ve daha büyük için% 100'e, orta ve küçük için 992 piksele ayarlanır. Table-xs, table-sm, table-md ve table-xl sınıfları aynı şekilde çalışır.

Question 13

Bootstrap 4.x için görüntüleme yardımcı programlarını kullanın:

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

Kullanım :

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

Question 14

Görünüşe göre "sr-only" öğesi ve tablonun içindeki stilleri bu hataya neden olan şeydir. En azından ben de aynı sorunu yaşadım ve aylarca kafamızı duvara vurduktan sonra sebebin ne olduğunu belirledik, yine de nedenini anlamıyorum. left:0"Yalnızca sr" stillerine eklemek sorunu çözdü.