Bootstrap 4-reaktionsfähige Tabellen nehmen nicht 100% Breite ein

96

Ich erstelle eine Web-App mit Bootstrap 4 und stoße auf einige seltsame Probleme. Ich möchte die auf Tabellen reagierende Klasse von Bootstrap verwenden, um ein horizontales Scrollen der Tabellen auf Mobilgeräten zu ermöglichen. Auf Desktop-Geräten sollte die Tabelle 100% der Breite des enthaltenen DIV einnehmen.

Sobald ich die auf .table reagierende Klasse auf meine Tabelle anwende, wird die Tabelle horizontal verkleinert und nimmt nicht mehr 100% der Breite ein. Irgendwelche Ideen?

Hier ist mein Markup:

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

Wenn ich auf die auf .table reagierende Klasse eine Breite von 100% anwende, wird die Tabelle selbst zu 100% breit, aber die untergeordneten Elemente (TBODY, TR usw.) sind immer noch schmal.

css bootstrap-4 Eat-Sleep-Code
quelle

158

Folgendes wird NICHT ARBEITEN. Es verursacht ein anderes Problem. Es wird jetzt die 100% -Breite ausführen, reagiert jedoch nicht auf kleinere Geräte:

.table-responsive {
    display: table;
}

Alle diese Antworten führten zu einem weiteren Problem, indem sie empfohlen wurden display: table;. Die einzige Lösung besteht derzeit darin, es als Wrapper zu verwenden:

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

John FatBoy Doeeee Rolla
quelle

2

Zappelte für immer damit herum - zu früh, um darüber nachzudenken, es einfach einzuwickeln.

JSF

Die Verwendung der table-responsiveKlasse als Wrapper greift auf Bootstrap 3 zurück ...? Ich bin froh, dass es vorerst eine Lösung gibt! Bootstrap 4 Alpha ;-)

Steve Meisner

Ich sehe das nicht mit Beta. Sieht so aus, als müssten Sie das div entfernen und "table-responsive" entlang "table" hinzufügen. Wie so .. <table class = "table table-responsive">

Winnemucca

Dieses Problem wurde in Bootstrap 4 immer noch nicht behoben, obwohl ein Teil von Ihrer Antwort zustimmt. In den Migrationsanweisungen von Bootstrap 3 nach 4 heißt es: "Responsive-Tabellen erfordern kein Wrapping-Element mehr. Setzen Sie stattdessen einfach die .table-responsive direkt auf der <Tabelle>. "... hier zu finden: getbootstrap.com/docs/4.0/migration/#tables

Marin

Funktioniert perfekt für mich in Version 4.3.1! Vielen Dank

Ibrahim Isa

38

Diese Lösung hat bei mir funktioniert:

Fügen Sie einfach eine weitere Klasse zu Ihrem Tabellenelement hinzu: w-100 d-block d-md-table

so wäre es: <table class="table table-responsive w-100 d-block d-md-table">

Stellen Sie für Bootstrap 4 w-100die Breite auf 100% ein d-block(Anzeige: Block) und d-md-table(Anzeige: Tabelle auf Mindestbreite: 576 Pixel).

Bootstrap 4-Anzeigedokumente

Faytraneozter
quelle

2

Funktioniert für Bootstrap4 Beta! Der Schlüssel war w-100. Danke.

ObjectiveTC

Hat diese Lösung nicht den gleichen Effekt wie nur <table class="table table-responsive-md">?

James Wilson

20

Wenn Sie V4.1 verwenden und den entsprechenden Dokumenten entsprechen, weisen Sie .table-responsive nicht direkt der Tabelle zu. Die Tabelle sollte .table sein, und wenn Sie möchten, dass sie horizontal scrollbar (reaktionsfähig) ist, fügen Sie sie in einen auf .table reagierenden Container ( <div>z. B. a) ein.

Mit reaktionsschnellen Tabellen können Tabellen problemlos horizontal gescrollt werden. Stellen Sie sicher, dass jede Tabelle in allen Ansichtsfenstern reagiert, indem Sie eine Tabelle mit .table-responsive umschließen.

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

Dabei wird kein zusätzliches CSS benötigt.

Im OP-Code kann .table-responsive neben dem .col-md-12 auf der Außenseite verwendet werden.

Marcelo Myara
quelle

3

Dies sollte die richtige Antwort seit der stabilen Version von Bootstrap sein. Thx

Peter

2

Das ist die Antwort. Vielen Dank

Gjaa

1

Korrekte Antwort!

Andrew Schultz

6

Aus irgendeinem Grund verhält sich insbesondere die Reaktionstabelle nicht so, wie sie sollte. Sie können es patchen, indem Sie es loswerdendisplay:block;

.table-responsive {
    display: table;
}

Ich kann einen Fehlerbericht einreichen.

Bearbeiten:

Es ist ein vorhandener Fehler.

Serg Chernata
quelle

5

Keine dieser Antworten funktioniert (Datum heute, 9. Dezember 2018). Die richtige Auflösung besteht darin, Ihrer Tabelle .table-responsive-sm hinzuzufügen:

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

Dies gilt nur für die SM-Ansicht (mobil). In der mobilen Ansicht erhalten Sie also den gewünschten Bildlauf, und in größeren Ansichten reagiert die Tabelle nicht und wird daher wie gewünscht in voller Breite angezeigt.

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

SongBox
quelle

2

Die mit v4 des Frameworks kompatible Lösung besteht darin, den richtigen Haltepunkt festzulegen. Anstatt .table-responsive zu verwenden, sollten Sie in der Lage sein, .table-responsive-sm zu verwenden (um nur auf kleinen Geräten zu reagieren)

Sie können einen der verfügbaren Endpunkte verwenden: table-responsive {-sm | -md | -lg | -xl}

Rubén_ic
quelle

1

Dies liegt daran, dass die .table-responsiveKlasse die Eigenschaft display: blockzu Ihrem Element hinzufügt , wodurch sie gegenüber der vorherigen geändert wird display: table.

Überschreiben Sie diese Eigenschaft display: tablein Ihrem eigenen Stylesheet

.table-responsive {
    display: table;
}

Hinweis: Stellen Sie sicher, dass dieser Stil nach Ihrem Bootstrap-Code ausgeführt wird, damit er überschrieben wird.

Nikhil Nanjappa
quelle

1

Dies wird dadurch verursacht, dass die table-responsiveKlasse der Tabelle eine Eigenschaft von gibt display:block, was seltsam ist, da dies das tableOriginal der Klasse überschreibt display:tableund die Tabelle beim Hinzufügen verkleinert wirdtable-responsive .

Höchstwahrscheinlich ist Bootstrap 4 noch in der Entwicklung. Sie können diese Eigenschaft sicher mit Ihrer eigenen Klasse überschreiben, display:tabledie die Reaktionsfähigkeit der Tabelle nicht beeinträchtigt.

z.B

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

Callum
quelle

1

Unter Berücksichtigung der anderen Antworten würde ich so etwas tun, danke!

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

Alexis
quelle

1

Erstellen Sie reaktionsfähige Tabellen, indem Sie eine beliebige Tabelle mit .table-responsive {-sm | -md | -lg | -xl} umschließen. Die Tabelle wird an jedem Haltepunkt mit maximaler Breite von bis zu 576 Pixel (768 Pixel, 768 Pixel) horizontal gescrollt. 992px bzw. 1120px.

Wickeln Sie die Tabelle einfach mit .table-responsive {-sm | -md | -lg | -xl} ein

beispielsweise

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

Bootstrap 4 Tabellen

iMezied
quelle

0

Ich habe festgestellt, dass die Verwendung der empfohlenen Klasse, die auf Tabellen reagiert, in einem Wrapper immer noch dazu führt, dass reaktionsfähige Tabellen (überraschenderweise) horizontal schrumpfen:

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

Die Lösung für mich bestand darin, die folgenden Medien-Haltepunkte und -Klassen zu erstellen, um dies zu verhindern:

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

Dann kann ich meinem Tabellenelement die entsprechende Klasse hinzufügen. Beispielsweise:

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

Hier setzt der Wrapper die Breite auf 100% für groß und größer pro Bootstrap. Mit der auf das Tabellenelement angewendeten table-lg-Klasse wird die Tabellenbreite für große und größere ebenfalls auf 100%, für mittlere und kleinere auf 992px festgelegt. Die Klassen table-xs, table-sm, table-md und table-xl funktionieren auf die gleiche Weise.

ScottyB
quelle

0

Verwenden Sie für Bootstrap 4.x Anzeige-Dienstprogramme:

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

Verwendung :

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

Bora
quelle

0

Es scheint, als ob das "sr-only" -Element und seine Stile in der Tabelle diesen Fehler verursachen. Zumindest hatte ich das gleiche Problem und nachdem wir monatelang unseren Kopf gegen die Wand geschlagen hatten, stellten wir fest, dass dies die Ursache war, obwohl ich immer noch nicht verstehe, warum. Das Hinzufügen left:0zu den "nur sr" -Stilen hat das Problem behoben.

Bryn Newell
quelle

Bootstrap 4-reaktionsfähige Tabellen nehmen nicht 100% Breite ein

Antworten: