今天,同事問我一個問題,怎樣實現表格資料很多的時候,使用者滾動到下面也可以看到對應表頭的互動效果,畢竟如果表頭資料不熟悉,滾動到下方會不記得每列資料對應的內容,又滾動上來看錶頭內容這種體驗很不友好,我想到了一個解決方案.
思路:
1.建立兩個表格,第一個表格table1沒有標題,隱藏; 2.設定table1表格的表頭每一個th的寬度為第二個表格的表體的每一個td的寬度; 3.滾動監聽,當表格的表頭滾過視訊頂部,顯示table1的表頭,否則,隱藏table1的表頭; 4.監聽頁面縮放,頁面縮放時重新執行步驟2;
預覽效果:
程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.table {
width: 100%;
/*為表格設定合併邊框屬性*/
border-collapse: collapse;
}
.table tr th, .table tr td {
margin: 0;
padding: 15px 16px 14px;
box-sizing: border-box;
}
.table thead th {
background: #fafafa;
}
.table tr th {
background: #fafafa;
transition: background .3s ease;
text-align: left;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
border-bottom: 1px solid #e8e8e8;
}
.table tr td {
border-bottom: 1px solid #e8e8e8;
transition: all .3s;
}
.table>tbody>tr:hover {
background: #e9f5fe;
}
.fixedTableHeader {
width: calc(100% - 40px);
display: none;
position: fixed;
top: 0px;
left: 20px;
overflow: hidden;
margin: 0 auto;
z-index: 999;
transition: all 0.5s ease-in;
}
</style>
</head>
<body>
<div>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
<p>ewdfwefgefg</p>
</div>
<div style="padding: 20px;">
<div id="fixedTableHeader" class="fixedTableHeader">
<table class="table">
<thead>
<tr id="mytr1">
<th>姓名</th>
<th>年齡</th>
<th>籍貫</th>
<th>手機號</th>
<th>居住地址</th>
</tr>
</thead>
</table>
</div>
<div>
<table id="table" class="table">
<thead>
<tr id="mytr2">
<th>姓名</th>
<th>年齡</th>
<th>籍貫</th>
<th>手機號</th>
<th>居住地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
<tr>
<td>張三</td>
<td>12</td>
<td>湖北武漢</td>
<td>13540021458</td>
<td>湖北省武漢市</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
const mytr1Child = document.getElementById('mytr1').children;
const mytr2Child = document.getElementById('mytr2').children;
const table = document.getElementById('table');
const fixedTableHeader = document.getElementById('fixedTableHeader')
// 設定隱藏表頭每一列的寬度和實際表頭每一列的寬度保持一致
function setWidth() {
for(let i = 0; i < mytr1Child.length; i++) {
mytr1Child[i].style.width = mytr2Child[i].offsetWidth + 'px';
}
}
setWidth();
window.resize = function() {
setWidth();
}
document.addEventListener('scroll', () => {
if(document.documentElement.scrollTop > table.offsetTop) {
fixedTableHeader.style.display = 'block';
} else {
fixedTableHeader.style.display = 'none';
}
});
</script>
</html>
複製程式碼結語
這個程式碼放在vue中可直接使用,切記setWidth這個函式需要訪問dom結構,呼叫週期應在mouted之後,這個方案不一定是最優的,非常歡迎有更好想法的小夥伴聯絡我交流分享.(qq: 2510909248),一起進步~