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);
            }
    

      

  • 相关阅读:
    Codeforces Round #595 (Div. 3) A,B,C,D
    计算几何板子题【2019牛客国庆集训派对day7——三角形和矩形】【多边形相交的面积】
    [POJ]POJ1753(dfs)
    [POJ]POJ2965(dfs)
    洛谷 P1772 [ZJOI2006]物流运输 题解
    简单概率与期望
    洛谷 P3802 小魔女帕琪 题解
    用树状数组实现的平衡树
    【模板】扩展中国剩余定理(EXCRT)
    新博客开通通知
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/8865357.html
Copyright © 2011-2022 走看看