作者: Fred F.M. Wang (FW知識瑣記) 日期: 2021-9-29
網頁中如何設計一個表頭固定但內容可以捲動的表格
要讓表格表頭固定，內容可以捲動，首先，table header(thead)與table body(tbody)必須各
自設定顯示方式為block(CSS設定 display: block;)，但是，table header(thead)與table body
(tbody)各自設定為block時，表頭與內容的欄位寬度就無法對齊。因此，必須透過Javascript設定table header欄寬與table body的欄寬一致
==================================================
<style>
thead.fixedHeader { display: block; }
thead.fixedHeader tr th { padding: 4px 0px!important; }
tbody.scrollContent {
display: block;
overflow: auto;
}
</style>
<table id="itemtable">
<thead id="itemheader" class="fixedHeader">
<tr>
..
</tr>
</thead>
<tbody id="itemcontent" class="scrollContent">
<tr>
..
</tr>
</tbody>
=============================================
<script type="text/javascript">
$( document ).ready(function () {
// 設定捲動區域，區域底部不要超過視窗底部
var content_y = get_offset_y("itemcontent"); // 取得table body畫面左上角的座標y位置
var content_height = window.screen.height - content_y - 200; // 設定table body的高
document.getElementById("itemcontent").style.height= content_height + "px";
// 設定table header欄寬與table body的欄寬一致 by Fred
var theader = document.getElementById("itemheader");
var tbody = document.getElementById("itemcontent");
row0 = theader.rows[0]; // table header row
row1 = tbody.rows[0]; // table body 1st row
// 逐一設定table header每一欄欄寬等於table body每一欄的實際顯示寬度
for (var j = 0; j < row1.cells.length; j++) {
row0.cells[j].style.width = (row1.cells[j].offsetWidth - 1) + "px"; // offsetWidth:實際顯示
寬度，注意要減一，否則無法對齊
}
/* 取得一個HTML元素在畫面中的位置(左上角的座標y位置) */
function get_offset_y(id) {
var e = document.getElementById(id);
var offset = {x:0,y:0};
while (e)
{
offset.x += e.offsetLeft;
offset.y += e.offsetTop;
e = e.offsetParent;
}
if (document.documentElement && (document.documentElement.scrollTop
|| document.documentElement.scrollLeft)) {
offset.x -= document.documentElement.scrollLeft;
offset.y -= document.documentElement.scrollTop;
} else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
offset.x -= document.body.scrollLeft;
offset.y -= document.body.scrollTop;
} else if (window.pageXOffset || window.pageYOffset) {
offset.x -= window.pageXOffset;
offset.y -= window.pageYOffset;
}
// alert(offset.x + '\n' + offset.y);
return offset.y
}
</script>
註: 取得一個HTML元素在畫面中的位置參考來源https://stackoverflow.com/questions/211703/is-it-possible-to-get-the-position-of-div-within-the-browser-viewport-not-withi
