• 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;
            }
          }
  • 相关阅读:
    Linux设备模型 学习总结
    平衡二叉树
    数字在排序数组中出现的次数
    两个链表的第一个公共节点
    第一个只出现一次的字符
    丑数
    把数组排成最小的数
    剑指offer 连续子数组的最大和
    查找描述信息中包括robot的电影对应的分类名称以及电影数目,而且还需要该分类对应电影数量>=5部
    for each
  • 原文地址:https://www.cnblogs.com/duanzhange/p/8969094.html
Copyright © 2020-2023  润新知