web-dev-qa-db-de.com

Bootstrap 4-responsive Tabellen nehmen keine Breite von 100% ein

Ich baue 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 das horizontale Scrollen der Tabellen auf mobilen Geräten zu ermöglichen. Auf Desktop-Geräten sollte die Tabelle 100% der Breite des enthaltenen DIV ausmachen.

Sobald ich die .table-responsive-Klasse auf meinen Tisch anwende, schrumpft der Tisch horizontal und nimmt nicht mehr 100% der Breite in Anspruch. 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 der .table-responsive-Klasse eine Breite von 100% anwende, wird die Tabelle selbst eine Breite von 100%, aber die untergeordneten Elemente (TBODY, TR usw.) sind immer noch eng.

58
eat-sleep-code

Das folgende funktioniert nicht. Es verursacht ein anderes Problem. Jetzt wird die Breite von 100% erreicht, aber auf kleineren Geräten reagiert es nicht:

.table-responsive {
    display: table;
}

Alle diese Antworten führten zu einem anderen Problem, indem sie display: table; empfahlen. Die einzige Lösung zum jetzigen Zeitpunkt ist die Verwendung als Wrapper:

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

Diese Lösung hat für mich funktioniert:

fügen Sie einfach eine weitere Klasse in Ihr Tabellenelement ein: w-100 d-block d-md-table

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

für Bootstrap 4 w-100 die Breite auf 100% d-block (Anzeige: Block) und d-md-table (Anzeige: Tabelle auf Min-Breite: 576px) setzen

Bootstrap 4-Anzeige von Dokumenten

17
Faytraneozter

Wenn Sie V4.1 verwenden, weisen Sie .table-responsive gemäß den zugehörigen Dokumenten nicht direkt der Tabelle zu. Die Tabelle sollte .table sein, und wenn Sie möchten, dass der Bildlauf horizontal ausgeführt werden kann (responsive), fügen Sie sie in einen .table-responsive-Container ein (a <div>, zum Beispiel).

Mit reaktionsschnellen Tabellen können Tabellen problemlos horizontal gescrollt werden. Richten Sie eine Tabelle in allen Ansichtsfenstern ein, indem Sie ein .table mit .table-responsive umschließen

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

dafür wird kein zusätzliches CSS benötigt.

Im OP-Code kann .table-responsive zusammen mit .col-md-12 an der Außenseite verwendet werden.

12
Marcelo Myara

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

.table-responsive {
    display: table;
}

Ich kann einen Fehlerbericht einreichen.

Bearbeiten:

Es ist ein Fehler.

5
Serg Chernata

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

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

2
Rubén_ic

In Anbetracht der anderen Antworten würde ich so etwas tun, danke!

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

Das liegt daran, dass die .table-responsive-Klasse Ihrem Element die Eigenschaftdisplay: blockhinzufügt, wodurch es vom vorherigendisplay: tablegeändert wird.

Überschreiben Sie diese Eigenschaft in Ihrem eigenen Stylesheet zurück zudisplay: table 

.table-responsive {
    display: table;
}

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

1
Nikhil Nanjappa

Dies wird durch die table-responsive-Klasse verursacht, die der Tabelle eine Eigenschaft von display:block gibt, was seltsam ist, da hierdurch das table-Klassen-Original display:table überschrieben wird. Deshalb schrumpft die Tabelle, wenn Sie table-responsive hinzufügen. 

Höchstwahrscheinlich ist es bis Bootstrap 4 noch in dev. Sie können diese Eigenschaft mit einer eigenen Klasse überschreiben, die display:table festlegt, und die Reaktionsfähigkeit der Tabelle wird dadurch nicht beeinträchtigt.

z.B.

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

Keine dieser Antworten funktioniert (Datum heute, 9. Dezember 2018). Die richtige Lösung hier ist das Hinzufügen von .table-responsive-sm zu Ihrer Tabelle:

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

Dies gilt für den Aspekt der Reaktionsfähigkeit nur für die SM-Ansicht (mobil). In der mobilen Ansicht wird also der Bildlauf wie gewünscht und in größeren Ansichten reagiert der Tisch nicht und wird somit in voller Breite angezeigt.

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

0
SongBox

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

wickle die Tabelle einfach mit .table-responsive {-sm | -md | -lg | -xl}

zum Beispiel

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

Bootstrap 4-Tabellen

0
imezied

Ich habe festgestellt, dass die Verwendung der empfohlenen Klasse für Tabellenreaktionen in einem Wrapper immer noch dazu führt, dass responsive Tabellen (überraschenderweise) horizontal schrumpfen:

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

Die Lösung für mich bestand darin, die folgenden Medienhaltepunkte 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. Zum Beispiel:

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

Hier legt der Wrapper die Breite für Bootstrap auf 100% fest. Wenn die table-lg-Klasse auf das table-Element angewendet wird, wird die Tabellenbreite für groß und größer ebenfalls auf 100% festgelegt, für mittel und kleiner jedoch auf 992px. Die Klassen table-xs, table-sm, table-md und table-xl funktionieren auf dieselbe Weise.

0
ScottyB

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

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

Verwendung:

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