overflow问题--滚动设置?
Posted 向往回得来
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了overflow问题--滚动设置?相关的知识,希望对你有一定的参考价值。
左边保持不变,右边多出来的table的td要设置为overflow:scroll,但是有个问题,就是,无论td的宽度设置为多少,它都会按照表格的百分之百来自适应,根本不会出现滚动条,查阅了一些资料以后,找到了解决方案。
1.table要给它设定一个父级div,并且设置父级div的属性
-overflow:auto;display:block。
2.设置table的属性
-min-width:100%
3.设置table td的属性:
-min-width:50px
代码:<style> div{ overflow:auto; display:block; } div table{ min-width:100%; } div table td{ min-width:50px; } </style> <div style="overflow:auto;display:block"> <table style="min-width:100%"> <tr> <td>test</td> <tr> </table> </div>
table的head不动,body如何设置overflow:scroll
html结构
<table class="sys-table">
<thead>
<tr>
<th>序列</th>
<th>系统ID</th>
<th>系统名称</th>
<th>是否启用</th>
<th>publicKey</th>
<th>司机指标</th>
<th>货主指标</th>
</tr>
</thead>
<tbody>
<tr>
<td>序列</td>
<td>系统ID</td>
<td>系统名称</td>
<td>是否启用</td>
<td>publicKey</td>
<td>司机指标</td>
<td>货主指标</td>
</tr>
</tbody>
</table>
sass样式
.sys-table{
width: 100%;
border-collapse:collapse;
border-spacing:0;
thead {
display: block;
width: 100%;
background-color: orange;
}
tbody{
display: block;
height: 70px;
background-color: palegoldenrod;
overflow-y: auto;
width: 100%;
}
tr{
display: block;
width: 100%;
border-bottom: 1px solid $white;
}
td,th{
padding: 10px;
text-align: center;
}
}
以上是关于overflow问题--滚动设置?的主要内容,如果未能解决你的问题,请参考以下文章
移动端body设置overflow:hidden失效与设置之后页面会向上滚动问题