Bootsrap Vertikale Scrollbare Tabelle

Question

In meinem Angular-Programm möchte ich eine scrollbare Tabelle haben. Ich habe versucht, die CSS zu verwenden, die ich hier gesehen habe, aber es funktioniert überhaupt nicht wie die, die ich sehe. Ich habe eine bootply hier gemacht: https://www.bootply.com/el0aE4hBfj

und wann immer ich die .css hinzufügen, dass ich habe es scrollbaren gesehen machen:

.table-fixed{ 
 
    width: 100%; 
 

 
} 
 

 
.table-fixed tbody { 
 
    height: 200px; 
 
    overflow-y: auto; 
 
    width: 100% 
 
} 
 

 
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th { 
 
    display: block; 
 
} 
 

 
.table-fixed tbody td, .table-fixed thead > tr > th { 
 
    float: left; 
 
    border-bottom-width: 0; 
 
}

es, zerstört sie vollständig.

Wie kann ich meinen Tisch scrollbar machen?

Answer 1

es behoben, durch Zugabe von:

tbody { 
 
    display: block; 
 
    height: 195px; 
 
    overflow: auto; 
 
} 
 

 
thead, tbody tr { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 

 
thead { 
 
    width: calc(100% - 1em) 
 
}

statt dessen, was ich in meinem OP hatte

Answer 2

Eine mögliche Lösung ist Ihre Tabellen in ein div und legen Sie die folgenden Arten wickeln:

.t-wrapper { 
    max-width: 100%; 
    overflow-x: auto; 
} 

mit dem folgenden HTML

<div class="t-wrapper"> 
    <table> 
     // Your table... 
    </table> 
</div> 

Dies wird die Tabellen scrollbaren machen, wenn sie don‘ t passen in ihren Behälter.