zoukankan      html  css  js  c++  java
  • 表头不动,内容滚动的例子(纯css+html)

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Table</title>
        <style type="text/css">
            .table{
                 100%;
                border-collapse:collapse; 
                border-spacing:0; 
            }
            .fixedThead{
                display: block;
                 100%;
            }
            .scrollTbody{
                display: block;
                height: 262px;
                overflow: auto;
                 100%;
            }
            .table td,.table th {
                 200px;
                border-bottom: none;
                border-left: none;
                border-right: 1px solid #CCC;
                border-top: 1px solid #DDD;
                padding: 2px 3px 3px 4px
            }
            .table tr{
                border-left: 1px solid #EB8;
                border-bottom: 1px solid #B74;
            }
            thead.fixedThead tr th:last-child {
                color:#FF0000;
                 200px;
            }
            td{
            word-wrap:break-word;
            word-break:break-all;
            }
        </style>
    </head>
    <body >
        <table class="table">
            <thead class="fixedThead">
                <tr><th>header</th><th>header two</th></tr>
            </thead>
            <tbody class="scrollTbody">
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
                <tr><td>test 1</td><td>test 2</td></tr>
            </tbody>
        </table>
    </body>
    </html>
  • 相关阅读:
    计算机硬件发展史
    17.Java8新特性_传统时间格式化的线程安全问题
    13. Java8新特性_Stream API 练习
    12. Java8新特性_Stream_归约与收集
    11.Java8新特性_Stream_查找与匹配
    10.Java8新特性_Stream_排序
    9. Java8新特性_Stream_映射
    8. Java8新特性_Stream_筛选与切片
    CentOS 安装 Python3
    CentOS7安装图形桌面系统(GNOME / KDE / Cinnamon / MATE / Xfce)
  • 原文地址:https://www.cnblogs.com/rocky-AGE-24/p/5456763.html
Copyright © 2011-2022 走看看