本博客持續(xù)修改與更新中，點擊這里查看最新的內(nèi)容
** 已知在移動端和safairi 都沒有 軟用，大家看看就好，有好的方式可以說下 **
[TOC]
背景
最近小弟在工作都是做后臺系統(tǒng)，一堆的表格，各種各樣的。然后需求上要有固定的表頭的表格，如下圖所示
table-thead-fixed
在網(wǎng)上查詢固定表頭的實現(xiàn)方式為：
-
thead設(shè)置為fixed - 拆分表格為兩個表格
thead一個，tbody一個
?然而上面的實現(xiàn)上有個條件是**要提前設(shè)置單元格的大小 **， 如果沒有設(shè)置對的會就是下面這個樣子（下面是其它的博主的例子圖， 我盜用下 :smirk: ）
?:expressionless::expressionless::expressionless::expressionless: 我可不要固定單元格寬度，固定的寬度怎么做組作啊。。。
在css3中的transform不會改變原來元素的大小位置，相當(dāng)于是復(fù)制了份出來，然后transform的計算速也夠快（這里婊一下absolute加left ，top，經(jīng)常慢半拍）。用這個做這個功能非常合適，還要加點js用于監(jiān)聽滾輪。
實現(xiàn)方式
運行我寫的 在線例子 打不開，請使用科學(xué)上網(wǎng)*:smirk::smirk::smirk:
<iframe height= 600 width= 100% src="https://embed.plnkr.co/k7ipmtXkpL0MDT9KGZbc/" frameborder=0 allowfullscreen></iframe>
下面貼下代碼
js:
// Code goes here
'use strict'
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
/**
* scroll handle
* @param {event} e -- scroll event
*/
function scrollHandle (e){
console.log(this)
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
}
css:
/* Styles go here */
.table-cont{
/**make table can scroll**/
max-height: 200px;
overflow: auto;
/** add some style**/
/*padding: 2px;*/
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}
html：
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class='table-cont' id='table-cont'><!--看這里-->
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
table-thead-fixed
搞定,美滋滋:thumbsup::thumbsup::thumbsup:
簡書不支 iframe和emoji嗎？ 不開心
