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 {  
            width: 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 {  
            width: 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;
        	width: 100%;
        	table-layout: fixed;
        }
        .scrollTbody{  
            display: block;  
            height: 200px;  
            overflow-y: scroll;  
            overflow-x: hidden;  
        }  
        /*减去滚动条宽度17px*/
        table thead {
        	width: calc(100% - 17px);
        }

  

 

posted @ 2018-04-17 13:58  铜镜123  阅读(309)  评论(0编辑  收藏  举报