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;
    }
  • 相关阅读:
    google 地图 v2
    javascript 跨域名 异常:
    cvs 使用规范
    fastcgi apache fcgi
    玄幻系列
    必须掌握的命令行(转)
    浏览器,RIA,flash,flex,siliverlight,socket
    游戏外挂的一些原理
    shtml我几乎要忘了的东西
    北京下雨了,兴奋中
  • 原文地址:https://www.cnblogs.com/pptt/p/11642163.html
Copyright © 2011-2022 走看看