• html5 table的表头固定的HTML代码


    table的表头固定的HTML代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>固定表头可以纵向滚动的html表格</title>
        <style type="text/css">
        #table_div{
            width:80%;
            margin-left: 50px;
        }
        #table_header{
            background-color: #7fffd4;
        }
        .col1,.col2,.col3{
            width: 20%
        }
        .col4{
            width:40%;
        }
        </style>
    </head>
    <body>
        <div id="table_div">
            <table width="100%">
                <tr id="table_header">
                    <th class="col1">学号</th>
                    <th class="col2">姓名</th>
                    <th class="col3">年级</th>
                    <th class="col4">家庭住址</th>
                </tr>    
            </table>
            <div style="overflow:auto;height:100px">
                <table width="100%">
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                    <tr>
                        <td class="col1">11111111</td>
                        <td class="col2">张三</td>
                        <td class="col3">2013级</td>
                        <td class="col4">吉林省长春市前进大街2699号</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>

    效果如下图所示,其中最主要的代码是style="overflow:auto;height:100px"

    学号姓名年级家庭住址
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
    11111111 张三 2013级 吉林省长春市前进大街2699号
  • 相关阅读:
    asp.net mvc controller调用js
    无刷新文件上传 利用iframe实现
    Git使用
    easyui扩展
    Highcharts 多个Y轴动态刷新数据
    Android之Handler
    asp.net mvc之TempData、ViewData、ViewBag
    android之滑屏的实现
    java多线程系类:JUC线程池:05之线程池原理(四)(转)
    java多线程系类:JUC线程池:04之线程池原理(三)(转)
  • 原文地址:https://www.cnblogs.com/killclock048/p/9479484.html
Copyright © 2020-2023  润新知