Bootsrap垂直滚动表

Question

在我的Angular程序中，我想要一个可滚动的表格。我试过使用我在这里看到的CSS，但它根本不起作用，就像我看到的那样。我在这里做了一个bootply：https://www.bootply.com/el0aE4hBfj

，每当我添加.css是我见过使其滚动：

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

它，完全破坏它。

如何让我的桌子可以滚动？

Answer 1

通过增加固定它：

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

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

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

什么，而不是我在OP有

Answer 2

一个可能的解决方案是包装你的表到一个div，并设置以下样式：

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

与下面的HTML

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

这将使表滚动的，如果他们不”适合在他们的容器内。