表头固定内容滚动【css笔记】 

<html>  
    <head> 
    <meta charset="utf-8"> 
    <style type="text/css">  
        /*所有内容都在这个DIV内*/  
        div.all {  
            border: 3px solid #FF00FF;  
            width: 80%;
            clear: right;  
        }  
          
        /*表头在这个DIV内*/  
        div.title {  
            width: 100%;  
        }  
        /*内容在这个DIV内*/  
        div.content {  
            width: 100%;  
            overflow: scroll;  /*总是显示滚动条*/  
            overflow-x: hidden; /*去掉横向滚动条*/  
            height: 100px;  
        }  
        div.title_left {  
            float: left;  
            margin-right: 17px;  
        }  
        div.content_left {  
            float: left;  
        }  
          
        .main_table {  
            width: 100%;  
            border: 1px solid #FF00FF;  
            border-collapse: collapse;  /*边线与旁边的合并*/    
            table-layout:fixed;
            text-align: center;  
        }  
        .main_table tr th {    
            border: 1px solid #FF00FF;    
            overflow: hidden;  /*超出长度的内容不显示*/    
            word-break: break-all;  /*字内断开*/    
            text-overflow: ellipsis;  /*当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符*/    
            white-space: nowrap;    
        }    
        /*单元格样式*/    
        .main_table tr td {    
            border: 1px solid #FF00FF;    
            overflow: hidden;    
            word-break: break-all;    
            text-overflow: ellipsis;    
            white-space: nowrap;    
        }    
    </style>  
    </head>  
    <body>  
        <div class="all">  
            <div class="title">  
                <div class="title_left">  
                <table class="main_table">  
                    <tr>  
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th> 
                    </tr>  
                </table>  
                </div>  
            </div>  
            <div class="content">  
                <div class="content_left">  
                <table class="main_table">  
                    <tr>  
                        <td>张三</td>
                        <td>21</td>
                        <td>男</td> 
                    </tr>  
                    <tr>  
                        <td>李四</td>
                        <td>35</td>
                        <td>男</td>   
                    </tr>  
                    <tr>  
                        <td>李红</td>
                        <td>18</td>
                        <td>女</td> 
                    </tr>  
                    <tr>  
                        <td>王五</td>
                        <td>20</td>
                        <td>男</td>   
                    </tr>  
                    <tr>  
                        <td>李飞</td>
                        <td>33</td>
                        <td>男</td> 
                    </tr>  
                    <tr>  
                        <td>张薇</td>
                        <td>23</td>
                        <td>女</td>  
                    </tr>  
                    <tr>  
                        <td>三毛</td>
                        <td>24</td>
                        <td>男</td>  
                    </tr>  
                    <tr>  
                        <td>鹏子</td>
                        <td>13</td>
                        <td>男</td> 
                    </tr>  
                    <tr>  
                        <td>黄一</td>
                        <td>26</td>
                        <td>女</td> 
                    </tr>  
                    <tr>  
                        <td>管理</td>
                        <td>28</td>
                        <td>男</td> 
                    </tr>   
                </table>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

 

posted @ 2016-10-17 17:00  HollyLearningNotes  阅读(5074)  评论(1)  编辑  收藏  举报