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

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

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.

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.

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}

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

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

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.

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

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

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

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.

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