利用css3 translate完美實(shí)現(xiàn)表頭固定效果
發(fā)布時(shí)間：2017-02-28 15:07:26 作者：zhangqh 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了利用css3 translate完美實(shí)現(xiàn)表頭固定效果的相關(guān)資料，文中通過(guò)示例代碼介紹的很詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
前言
前段時(shí)間在工作中正好需要這個(gè)功能，但是找了很多都不能完美的實(shí)現(xiàn)，所以在此就自己做了一個(gè)固定表頭的方法，主要用到了css3中的translate和一小段js代碼，下面來(lái)一起看看吧。
效果如下：
感覺是不是很和諧，而且代碼也少，不足的是IE9以下不支持translate屬性，但現(xiàn)在也沒多少要考濾IE9以下的兼容了吧，做前端老兼顧低版本的瀏覽器難免會(huì)讓自己束手束腳。。。。
下面來(lái)看下代碼吧
HTML
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
</tr>
</thead>
<tbody>
<script>
var tr = '';
for(var i=0; i<15; i++) {
tr += '<tr>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
<td>'+i+'</td>\
</tr>';
}
document.write(tr);
</script>
</tbody>
</table>
</div>
CSS樣式
<style>
*{ margin: 0; padding: 0; list-style: none;}
.box {
width: 300px;
height: 300px;
margin: 50px auto 0;
overflow: auto;
}
.box table{
width: 100%;
border-collapse: collapse;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center;
}
.box table thead {
background-color: #ccc;
}
.box table th,
.box table td {
padding: 8px 10px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
white-space: nowrap;
}
</style>
JS腳本
<script>
window.onload = function() {
var $ = document.querySelector.bind(document);
var boxEle = $('.box');
boxEle.addEventListener('scroll', function(e) {
this.querySelector('thead').style.transform = 'translate(0, '+this.scrollTop+'px)';
});
}
</script>
總結(jié)
好了，以上就是這篇文章的全部?jī)?nèi)容了，代碼是不是真的很少呢，還在等什么？快點(diǎn)感受一下吧。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
淺析CSS3 中的 transition，transform，translate之間區(qū)別和作用
這篇文章主要介紹了CSS3 中的 transition，transform，translate之間區(qū)別和作用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2020-03-26css3 中translate和transition的使用方法
這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-26
CSS3 translate導(dǎo)致字體模糊的實(shí)例代碼
這篇文章主要介紹了CSS3 translate導(dǎo)致字體模糊的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-30- 這篇文章主要為大家詳細(xì)介紹了CSS3 3D 位移translate效果實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-03
CSS3實(shí)現(xiàn)水平居中、垂直居中、水平垂直居中的實(shí)例代碼
在前端面試中經(jīng)常會(huì)遇到css居中效果的實(shí)現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過(guò)實(shí)例代碼給大家講解，需要的朋友參考下吧2020-02-27- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2019-08-09
- 這篇文章主要介紹了CSS水平垂直居中解決方案(6種)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-10
css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，有需要的朋友們下面來(lái)2017-04-23- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-17
