我在设置时遇到问题tbody高度宽度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>
此代码在引导程序中工作，但在“物化”主题中不起作用。
请帮我解决这个问题。
以下是您可以如何做到这一点。
JSFiddle 演示 https://jsfiddle.net/tfb517gg/
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
