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

      

  • 相关阅读:
    shell Builtin variables(shell内建变量)
    [置顶] 九度笔记之 1434:今年暑假不AC
    OpenRisc-45-or1200的ID模块分析
    hdu1556 Color the ball
    PB C/S轉B/S ODBC方式連接數據庫
    Django的安装配置和开发
    通过一个月时间字段分组
    如何加入该网站for Linux(绑定域名)
    LeetCode 36 Sudoku Solver
    POJ 1986 Distance Queries LCA两点距离树
  • 原文地址:https://www.cnblogs.com/1032473245jing/p/8865357.html
Copyright © 2011-2022 走看看