首页 > 代码库 > css固定表头

css固定表头

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main{
            font-family: ‘微软雅黑‘;
            width: 100%;
            border-left:1px solid #dfdfdf ;
            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>
    <div>
        <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>
        <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>

css固定表头