網頁設計 : 如何設計一個表頭固定但內容可以捲動的表格

作者: 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