码迷,mamicode.com
首页 > Web开发 > 详细

css固定表头

时间:2014-12-17 16:37:27      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:style   ar   sp   on   div   bs   ad   html   ef   

<!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固定表头

标签:style   ar   sp   on   div   bs   ad   html   ef   

原文地址:http://my.oschina.net/u/1861097/blog/357160

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!