zoukankan      html  css  js  c++  java
  • table 表头不动,tbody滚动对齐

    http://www.imaputz.com/cssStuff/bigFourVersion.html#

    https://blog.csdn.net/yiifaa/article/details/52104698

    可以将前面几个td的宽度固定,最后一个的宽度不固定

    https://segmentfault.com/a/1190000004713875

     方法一


    <table class="table">  
            <thead class="fixedThead">  
                <th>header</th><th>header two</th>  
            </thead>  
            <tbody class="scrollTbody">  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
         		<tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>  
                <tr><td>fuck 1</td><td>fuck 2</td></tr>
            </tbody>  
    

      css代码

    .table{  
                border-collapse:collapse;   
                border-spacing:0;   
            }  
            .fixedThead{  
                display: block;  
            }  
            .scrollTbody{  
                display: block;  
                height: 200px;  
                overflow: auto;  
            }  
            .table td,.table th {  
                 200px;  
                border-bottom: none;  
                border-left: none;  
                border-right: 1px solid #CCC;  
                border-top: 1px solid #DDD;  
                padding: 2px 3px 3px 4px  
            }  
    

      

    方法2


    .table td,.table th {  
                 200px;  
                border-bottom: none;  
                border-left: none;  
                border-right: 1px solid #CCC;  
                border-top: 1px solid #DDD;  
                padding: 2px 3px 3px 4px  
            }
    		.table{  
                border-collapse:collapse;   
                border-spacing:0;   
            } 
             
            table thead, tbody tr {
            	display: table;
            	 100%;
            	table-layout: fixed;
            }
            .scrollTbody{  
                display: block;  
                height: 200px;  
                overflow-y: scroll;  
                overflow-x: hidden;  
            }  
            /*减去滚动条宽度17px*/
            table thead {
            	 calc(100% - 17px);
            }
    

      

  • 相关阅读:
    基于Tire树和最大概率法的中文分词功能的Java实现
    通过 Spring RestTemplate 调用带请求体的 Delete 方法(Delete With Request Body)
    《高效能程序员的修炼》之译者序(本书将于7月初上市,人民邮电出版社)
    JVM类加载过程学习总结
    Web安全之Cookie劫持
    2016第40周五
    年轻By塞缪尔·厄尔曼
    2016第40周三
    2016第40周二
    果断歌
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/8865357.html
Copyright © 2011-2022 走看看