Responsywne tabele Bootstrap 4 nie zajmują 100% szerokości

97

Buduję aplikację internetową przy użyciu Bootstrap 4 i napotykam na dziwne problemy. Chcę wykorzystać klasę odpowiadającą tabeli Bootstrap, aby umożliwić poziome przewijanie tabel na urządzeniach mobilnych. Na urządzeniach stacjonarnych tabela powinna zajmować 100% szerokości zawierającego DIV.

Gdy tylko zastosuję klasę .table-responsive do mojego stołu, zmniejsza się on w poziomie i nie zajmuje już 100% szerokości. Jakieś pomysły?

Oto moje znaczniki:

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

Jeśli zastosuję 100% szerokości do klasy .table-responsive, spowoduje to, że sama tabela będzie miała 100% szerokości, ale elementy potomne (TBODY, TR itp.) Są nadal wąskie.

css  bootstrap-4 
— kod jedzenia i snu
źródło

Odpowiedzi:

161

Poniższe NIE DZIAŁA. To powoduje inny problem. Będzie teraz robił 100% szerokości, ale nie będzie reagował na mniejszych urządzeniach:

.table-responsive {
    display: table;
}

Wszystkie te odpowiedzi wprowadziły kolejny problem, polecając display: table;. Jedynym rozwiązaniem na razie jest użycie go jako opakowania:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
— John FatBoy Doeeee Rolla
źródło
2
Martwiłem się tym wiecznie - zbyt wcześnie, by myśleć o zwykłym zawinięciu. Your the man
— JSF
Używanie table-responsiveklasy jako opakowania nawiązuje do Bootstrap 3 ...? Cieszę się, że na razie jest rozwiązanie! Bootstrap 4 Alpha ;-)
— Steve Meisner
Nie widzę tej pracy w wersji beta. Wygląda na to, że będziesz musiał usunąć element div i dodać słowo „table-responsive” obok „table”. Tak więc ... <table class = "table table-responsive">
— Winnemucca
ten problem nadal nie został rozwiązany w bootstrapie 4, chociaż jedna część zgadza się z twoją odpowiedzią, instrukcje migracji z bootstrap 3 do 4 stan: „tabele responsywne nie wymagają już elementu opakowującego. Zamiast tego, po prostu wstaw plik .table-responsive tuż przy <table>. ”... znaleziono tutaj: getbootstrap.com/docs/4.0/migration/#tables
— Marin
U mnie działa idealnie w wersji 4.3.1! Dziękuję
— Ibrahim Isa
39

To rozwiązanie zadziałało dla mnie:

po prostu dodaj kolejną klasę do elementu tabeli: w-100 d-block d-md-table

więc byłoby: <table class="table table-responsive w-100 d-block d-md-table">

dla bootstrap 4 w-100ustaw szerokość na 100% d-block(display: block) i d-md-table(display: table on min-width: 576px)

Bootstrap 4 display docs

— Faytraneozter
źródło
2
Działa dla Bootstrap4 Beta! Klucz był w-100. Dziękuję Ci.
— ObjectiveTC
Czy to rozwiązanie nie daje takiego samego efektu, jak samo działanie <table class="table table-responsive-md">?
— JamesWilson
22

Jeśli używasz wersji 4.1 i zgodnie z ich dokumentacją, nie przypisuj pliku .table-responsive bezpośrednio do tabeli. Tabela powinna mieć format .table i jeśli chcesz, aby była przewijalna w poziomie (responsywna), dodaj ją do kontenera .table-responsive ( <div>na przykład).

Responsywne tabele umożliwiają łatwe przewijanie tabel w poziomie. Spraw, by każda tabela była responsywna we wszystkich rzutniach, opakowując .table w .table-responsive.

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

robiąc to, nie jest potrzebny żaden dodatkowy css.

W kodzie OP, .table-responsive może być używany razem z .col-md-12 na zewnątrz.

— Marcelo Myara
źródło
3
To ma być właściwa odpowiedź od stabilnej wersji bootstrapa. Thx
— Peter
2
To jest odpowiedź. Dziękuję
— Gjaa
1
Poprawna odpowiedź!
— Andrew Schultz,
6

Z jakiegoś powodu w szczególności responsywna tabela nie zachowuje się tak, jak powinna. Możesz go załatać, pozbywając siędisplay:block;

.table-responsive {
    display: table;
}

Mogę zgłosić błąd.

Edytować:

To istniejący błąd.

— Serg Chernata
źródło
5

Żadna z tych odpowiedzi nie działa (data dzisiejsza 9 grudnia 2018 r.). Poprawna rozdzielczość to dodanie .table-responsive-sm do tabeli:

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

Dotyczy to aspektu responsywności tylko do widoku SM (mobilnego). Tak więc w widoku mobilnym możesz przewijać zgodnie z życzeniem, aw większych widokach tabela nie reaguje i dlatego jest wyświetlana w pełnej szerokości, zgodnie z życzeniem.

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

— SongBox
źródło
Odkryłem to samo - zastosowanie table-responsive-?klasy bezpośrednio do tableelementu było jedynym sposobem na to, aby działał zgodnie z opisem, a nie przy użyciu opakowania div- ale kod w twoim przykładzie faktycznie oznacza, że ​​tylko xsrzutnie będą miały responsywne zachowanie a smwiększe będą „normalne”.
— Christopher King
2

Rozwiązaniem zgodnym z wersją 4 frameworka jest ustawienie odpowiedniego punktu przerwania. Zamiast używać .table-responsive, powinieneś móc używać .table-responsive-sm (aby reagować tylko na małych urządzeniach)

Możesz użyć dowolnego z dostępnych punktów końcowych: table-responsive {-sm | -md | -lg | -xl}

— Rubén_ic
źródło
1

Dzieje się tak, ponieważ .table-responsiveklasa dodaje właściwość display: blockdo twojego elementu, co zmienia ją w stosunku do poprzedniej display: table.

Zastąp tę właściwość z powrotem display: tablewe własnym arkuszu stylów

.table-responsive {
    display: table;
}

Uwaga: upewnij się, że ten styl jest wykonywany po kodzie ładowania początkowego, aby go przesłonić.

— Nikhil Nanjappa
źródło
1

Jest to spowodowane tym, że table-responsiveklasa nadaje tabeli właściwość display:block, co jest dziwne, ponieważ powoduje nadpisanie tableoryginalnej klasy display:tablei dlatego tabela kurczy się po dodaniu table-responsive.

Najprawdopodobniej jest to spowodowane tym, że bootstrap 4 wciąż jest w fazie deweloperskiej. Możesz bezpiecznie nadpisać tę właściwość własną klasą, która ustawia, display:tablei nie wpłynie to na szybkość reakcji tabeli.

na przykład

.table-responsive-fix{
   display:table;
}
— Callum
źródło
1

Biorąc pod uwagę inne odpowiedzi, zrobiłbym coś takiego, dzięki!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
— Alexis
źródło
1

Twórz responsywne tabele, opakowując dowolne .table w .table-responsive {-sm | -md | -lg | -xl}, sprawiając, że tabela przewija się w poziomie w każdym punkcie przerwania o maksymalnej szerokości do (ale nie włącznie) 576px, 768px, Odpowiednio 992px i 1120px.

po prostu zawiń tabelę .table-responsive {-sm | -md | -lg | -xl}

na przykład 

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

bootstrap 4 tabele

— iMezied
źródło
0

Zauważyłem, że użycie zalecanej klasy responsywnej tabeli w opakowaniu nadal powoduje (zaskakująco) zmniejszanie się w poziomie tabel responsywnych:

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

Rozwiązaniem dla mnie było utworzenie następujących punktów przerwania mediów i klas, aby temu zapobiec:

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

Następnie mogę dodać odpowiednią klasę do mojego elementu tabeli. Na przykład:

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

Tutaj opakowanie ustawia szerokość na 100% dla dużych i większych na Bootstrap. Po zastosowaniu klasy table-lg do elementu table, szerokość tabeli jest również ustawiana na 100% dla dużych i większych, ale na 992px dla średnich i mniejszych. Klasy table-xs, table-sm, table-md i table-xl działają w ten sam sposób.

— ScottyB
źródło
0

W przypadku Bootstrap 4.x użyj narzędzi wyświetlania:

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

Zastosowanie :

<table class="table w-100 d-print-block d-print-table">
— Bora
źródło
0

Wygląda na to, że element „sr-only” i jego style wewnątrz tabeli są przyczyną tego błędu. Przynajmniej miałem ten sam problem i po miesiącach uderzania głową o ścianę ustaliliśmy, że jest jego przyczyną, chociaż nadal nie rozumiem dlaczego. Dodanie left:0do stylów „tylko sr” naprawiło ten problem.

— Bryn Newell
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.