实现滚动体 [英] Materialize scroll tbody
本文介绍了实现滚动体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在设置tbody
高度宽度overflow-y: scroll
时遇到问题.
I am facing problem while setting tbody
height width overflow-y: scroll
.
我尝试过这个CSS
.table-status-sheet tbody{
min-height: 300px;
overflow-y: auto;
}
这是我的表格代码
<div class="responsive-table table-status-sheet">
<table class="bordered">
<thead>
<tr>
<th class="center">No.</th>
<th class="center">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category1</td>
</tr>
<tr>
<td>2</td>
<td>Category2</td>
</tr>
<tr>
<td>3</td>
<td>Category3</td>
</tr>
<tr>
<td>4</td>
<td>Category4</td>
</tr>
</tbody>
</table>
</div>
此代码在引导程序中有效,但在材料化"主题中无效. 请帮助我解决此问题.
This code is working in bootstrap but not worked in 'Materialized' theme. Please help me fix this issue.
推荐答案
这是您的操作方法.
JSFiddle DEMO
tbody {
display:block;
height:150px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<div class="responsive-table table-status-sheet">
<table class="bordered">
<thead>
<tr>
<th class="center">No.</th>
<th class="center">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Category1</td>
</tr>
<tr>
<td>2</td>
<td>Category2</td>
</tr>
<tr>
<td>3</td>
<td>Category3</td>
</tr>
<tr>
<td>4</td>
<td>Category4</td>
</tr>
</tbody>
</table>
</div>
这篇关于实现滚动体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文