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教程