zoukankan      html  css  js  c++  java
  • overflow问题--滚动设置?

    左边保持不变,右边多出来的table的td要设置为overflow:scroll,但是有个问题,就是,无论td的宽度设置为多少,它都会按照表格的百分之百来自适应,根本不会出现滚动条,查阅了一些资料以后,找到了解决方案。 
    1.table要给它设定一个父级div,并且设置父级div的属性 
    -overflow:auto;display:block。 
    2.设置table的属性 
    -min-100% 
    3.设置table td的属性: 
    -min-50px

    代码:<style> div{ overflow:auto; display:block; } div table{ min-100%; } div table td{ min-50px; } </style> <div style="overflow:auto;display:block"> <table style="min-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;
            }
          }
  • 相关阅读:
    数组实现栈
    栈应用实例单词逆序
    使用JXMapViewer将地图集成到swing app中
    使用xbee连接地面站和飞控
    QWT编译、配置、使用(Qt Creator)
    Qt跨线程调用错误解析及解决办法
    SVN版本服务器搭建(服务端+客户端)
    opencv配置过程 (cmake,vs2013,qt 5.4)
    基数排序/Go实现
    c/c++ 编译器内存对齐问题
  • 原文地址:https://www.cnblogs.com/duanzhange/p/8969094.html
Copyright © 2011-2022 走看看