zoukankan      html  css  js  c++  java
  • 记录手写Html Table自带滚动

    /*****************************html部分**********************************/

    <table class="table2 table table-bordered tbodyScroll" style="min-200px">
    <thead>
    <tr>
    <th>班级</th>
    <th>科目</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1班</td>
    <td>科学</td>
    </tr>
    </tbody>
    </table>
     
    /*****************************css部分**********************************/
    .tbodyScroll {
    height: 100%;
    margin-bottom: 0;
    }
    .tbodyScroll tbody {
    display: block;
    height: calc(100% - 38px);
    overflow-y: scroll;
    overflow-x: hidden;
    }
    .tbodyScroll thead {
    display: table;
    calc(100% - 10px);
    table-layout: fixed;
    }
    .tbodyScroll tr {
    display: table;
    calc(100% - 2px);
    table-layout: fixed;
    }
    /* 表格 */
    .table {
    border-spacing: 0;
    border-collapse: collapse;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td {
    vertical-align: middle;
    font-size: 14px;
    text-align: left;
    border: 1px solid #E5E9F4;
    color: #606266;
    padding: 3px 2px;
    }
    .table > thead > tr> th{
    background: #f4f7fc;
    font-size: 15px;
    font-weight: 550;
    color: #606266;
    height: 30px;
    }
  • 相关阅读:
    PDF 中的对象
    关于注释
    显示简单图形
    TColor 与 RGB 的转换函数
    关于运算符
    10 进制转 2 进制、16 进制
    Pascal 语言中的关键字及保留字
    语言字符集
    Async Java HTTP client
    老梁刨楚汉
  • 原文地址:https://www.cnblogs.com/pptt/p/11642163.html
Copyright © 2011-2022 走看看