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

      

  • 相关阅读:
    有效解决 iOS The document “(null)” requires Xcode 8.0 or later.
    扫描项目里没有使用的图片mac工具,删除没有使用的图片以减小包的体积
    苹果客服
    那些你不愿说给领导的话
    没有自动联想补齐代码的解决办法
    第三方的使用
    mac系统如何显示和隐藏文件
    导航栏
    svn(http)
    2020Python练习五
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/8865357.html
Copyright © 2011-2022 走看看