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问题--滚动设置?的主要内容,如果未能解决你的问题,请参考以下文章

overflow问题--滚动设置?

移动端body设置overflow:hidden失效与设置之后页面会向上滚动问题

如何在滚动视图中设置谷歌地图片段

CSS的overflow上下滚动

overflow:scroll; 不要左右滚动条怎么设置 html+css

ExtJs Panel 滚动条设置