DataTables 試作X捲軸

主要參考以下3篇教學:
https://ithelp.ithome.com.tw/articles/10272439
https://ithelp.ithome.com.tw/articles/10272813
https://ithelp.ithome.com.tw/articles/10273564?sc=iThomeR

DataTables官網 X捲軸
載入 Javascript library 和 CSS library，

<!--HTML-->
<table id="example" class="display nowrap" style="width:100%">
....略

//JS
new DataTable('#example', {  //起手式，ID 名稱
scrollX: true
});

/*CSS*/
div.dataTables_wrapper { /*套件會自動生成div.dataTables_wrapper 在<table>外層 */
    width: 800px;
    margin: 0 auto;
}

codepen試作X捲軸 link

狀況題: 如果表格因為計算會重複渲染表格某區塊，再使用DataTables的 X捲軸功能時，會造成計算錯誤和多一層table head，就用一般CSS的方式改寫上 X捲軸。

在<table>外層加上<div.scroll>

.scroll {
  padding-bottom: 3rem; /*錯開下方的分頁*/
  overflow-x: auto; /*viewport不夠寬時，就會出現捲軸*/
}