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

猜你喜欢

转载自www.cnblogs.com/duanzhange/p/8969094.html