表格的头部固定,内容滚动

1.html代码

<body>
<div class="all">
    <div class="title">
        <table>
            <tr>
                <th style="width:14%">星期一</th>
                <th style="width:14%">星期二</th>
                <th style="width:14%">星期三</th>
                <th style="width:14%">星期四</th>
                <th style="width:14%">星期五</th>
                <th style="width:14%">星期六</th>
                <th style="width:16%">星期日</th>
            </tr>
        </table>
    </div>

    <div class="content">
        <div>
            <table>
                <tr>
                    <td style="width:14%">喝水1</td>
                    <td style="width:14%">看电影1</td>
                    <td style="width:14%">打卡1</td>
                    <td style="width:14%">逛超市1</td>
                    <td style="width:14%">喝咖啡1</td>
                    <td style="width:14%">逛街1</td>
                    <td style="width:16%">游乐园1</td>
                </tr>
                <tr>
                    <td>喝水2</td>
                    <td>看电影2</td>
                    <td>打卡2</td>
                    <td>逛超市2</td>
                    <td>喝咖啡2</td>
                    <td>逛街2</td>
                    <td>游乐园2</td>
                </tr>
                <tr>
                    <td>喝水3</td>
                    <td>看电影3</td>
                    <td>打卡3</td>
                    <td>逛超市3</td>
                    <td>喝咖啡3</td>
                    <td>逛街3</td>
                    <td>游乐园3</td>
                </tr>
                <tr>
                    <td>喝水4</td>
                    <td>看电影4</td>
                    <td>打卡4</td>
                    <td>逛超市4</td>
                    <td>喝咖啡4</td>
                    <td>逛街4</td>
                    <td>游乐园4</td>
                </tr>
                <tr>
                    <td>喝水5</td>
                    <td>看电影5</td>
                    <td title="买买买，剁手节！买买买，剁手节！买买买，剁手节！" style="width:10%">双十一</td>
                    <td>逛超市5</td>
                    <td>喝咖啡5</td>
                    <td>逛街5</td>
                    <td>打卡5</td>
                    <!--每个td上都要加个title,鼠标放上去时显示全部内容,我这里偷懒就写了一个-->
                </tr>
            </table>
        </div>
    </div>
</div>
</body>

2.CSS代码

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        /*所有内容都在这个DIV内*/
        .all {
            width: 100%;
            border: 1px solid #000000;
        }
        /*表头在这个DIV内*/
        .title {
            width: 800px; /*这个宽度需要与下面的内容的DIV相等*/
        }
        /*表格样式*/
        table {
            width: 100%; /*撑满上面定义的500像素*/
            border: 1px solid pink;
            border-collapse: collapse; /*边线与旁边的合并*/
            table-layout:fixed;
        }
        /*表头单元格(这里将表头单元格的样式设置成了和单元格一样,实际中可以改变)*/
        table tr th {
            border: 2px solid blue;
            overflow: hidden; /*超出长度的内容不显示*/
            /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
            word-break: break-all; /*字内断开*/
            text-overflow: ellipsis; /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/
            white-space: nowrap;
        }
        /*单元格样式*/
        table tr td {
            border: 2px solid pink;
            overflow: hidden;
            /*word-wrap: break-word; 内容将在边界内换行,这里显示省略号,所以不需要了*/
            word-break: break-all;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /*容纳表格内容的DIV,这个DIV上放置滚动条*/
        .content {
            width: 53.3%;
            height: 100px; /*定一下高度,要不然就撑出来没滚动条了*/
            overflow: scroll; /*总是显示滚动条*/
            text-align: center;
        }
        /*真正存放内容的DIV*/
        .content div {
            width: 800px; /*与表头的DIV宽度相同*/
        }
    </style>

 

posted @ 2016-11-01 10:52  三高娘子  阅读(328)  评论(0)    收藏  举报