Bootsrap垂直滚动表
问题描述:
在我的Angular程序中,我想要一个可滚动的表格。我试过使用我在这里看到的CSS,但它根本不起作用,就像我看到的那样。我在这里做了一个bootply:https://www.bootply.com/el0aE4hBfjBootsrap垂直滚动表
,每当我添加.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;
}
它,完全破坏它。
如何让我的桌子可以滚动?
答
通过增加固定它:
tbody {
display: block;
height: 195px;
overflow: auto;
}
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
thead {
width: calc(100% - 1em)
}
什么,而不是我在OP有
答
一个可能的解决方案是包装你的表到一个div,并设置以下样式:
.t-wrapper {
max-width: 100%;
overflow-x: auto;
}
与下面的HTML
<div class="t-wrapper">
<table>
// Your table...
</table>
</div>
这将使表滚动的,如果他们不”适合在他们的容器内。
,如果我想我的表是水平滚动这可能会工作,但我想它垂直滚动页眉和页脚固定在顶部和底部,只有身体被滚动 – asdf
对不起,我的坏...误解您的问题 – Syjin
这是所有的好人,谢谢为思想! – asdf