css固定表头

时间  2019-11-24
标签 css 固定 表头 栏目 CSS 繁體版
原文   原文链接

<!DOCTYPE html>html

<html>单元测试

<head>测试

    <meta charset="UTF-8">spa

    <title></title>htm

    <style>ci

        .main{it

            font-family: '微软雅黑';table

            width: 100%;class

            border-left:1px solid #dfdfdf ;meta

            border-top:1px solid #dfdfdf ;

            border-right: 1px solid #dfdfdf;

        }

        .head table{

            width: 100%;

            height: 30px;

            padding-right: 17px;

            border-bottom: 1px solid #dfdfdf;

        }

        .head th{

            border-right: 1px solid #dfdfdf;

        }

        .body table{

            width: 100%;

        }

        .body tr{

            border-top: 1px solid #dfdfdf;

            border-bottom: 1px solid #dfdfdf;

            height: 30px;

        }

        .body td{

            border-right: 1px solid #dfdfdf;

            border-bottom: 1px solid #dfdfdf;

        }

        .body{

            max-height: 500px;

            overflow-y: scroll;

        }

    </style>

</head>

<body>

<div class="main">

<div class="head">

    <table cellpadding="0" cellspacing="0">

        <tr>

            <th width="120">测试项目1</th>

            <th width="20">测试项目2</th>

            <th width="20">测试项目3</th>

            <th width="20">测试项目4</th>

            <th width="20">测试项目5</th>

        </tr>

    </table>

</div>

<div class="body">

    <table cellpadding="0" cellspacing="0">

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>            <tr>

        <td width="120">单元测试1</td>

        <td width="20">单元测试2</td>

        <td width="20">单元测试3</td>

        <td width="20">单元测试4</td>

        <td width="20">单元测试5</td>

    </tr>

        <tr>

            <td width="120">单元测试1</td>

            <td width="20">单元测试2</td>

            <td width="20">单元测试3</td>

            <td width="20">单元测试4</td>

            <td width="20">单元测试5</td>

        </tr>

    </table>

</div>

</div>

</body>

</html>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程