資訊專欄INFORMATION COLUMN
摘要：將設置為將和的放入一個的中，設置橫向軸可以滾動，軸不可滾動。表頭和表內容的橫向方向滾動能力其實是父級樣式賦予的。
1.為了固定表頭我們需要先把表格的head和tbody切分到兩個table里： 和
里。
2.將table-body放在一個table-body-box的div里設置y軸方向可以滾動，x軸方向不可滾動，這樣表內容就能在自己的區域實現垂直方向的滾動了。
3.將table-head設置為absolute
4.將table-head和table-body-box的div放入一個table-box的div中，設置橫向x軸可以滾動，y軸不可滾動。
這樣兩個表就會在x方向滾動，y軸不滾動，表頭就垂直方向固定在垂直方向，橫向滾動在table-box出現滾動條的時候，內部的表格頭和表格內容因為沒有設置為fixed，所以會被滾動。
表頭和表內容的橫向方向滾動能力（其實是父級overflow-x:scroll樣式賦予的）。表內容的垂直方向滾動是通過表內容外套的table-body-box設置overflow-y:scroll來實現的。
5.代碼如下：
html如下
Company
Provision
Following in Point
Customer Grade
Allocated Time
Follow up Person
Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
Shanghai Yinghuang
FOB
Dumped Cabinet
Important
2017-10-28
Nathan
Sales Department
6.可以結合flex做到自適應表頭和表格內容
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112814.html
摘要：將設置為將和的放入一個的中，設置橫向軸可以滾動，軸不可滾動。表頭和表內容的橫向方向滾動能力其實是父級樣式賦予的。 1.為了固定表頭我們需要先把表格的head和tbody切分到兩個table里： 和 里。 2.將table-body放在一個table-body-box的div里設置y軸方向可以滾動，x軸方向不可滾動，這樣表內容就能在自己的區域實現垂直方向的滾動了。3.將table-hea...
摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動 了嗎？ 序 在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...
摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動 了嗎？ 序 在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...
摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發過程...
閱讀 3209·2023-04-26 02:27
閱讀 2138·2021-11-22 14:44
閱讀 4082·2021-10-22 09:54
閱讀 3195·2021-10-14 09:43
閱讀 748·2021-09-23 11:53
閱讀 12675·2021-09-22 15:33
閱讀 2704·2019-08-30 15:54
閱讀 2681·2019-08-30 14:04
