資訊專欄INFORMATION COLUMN
摘要：將設(shè)置為將和的放入一個的中，設(shè)置橫向軸可以滾動，軸不可滾動。表頭和表內(nèi)容的橫向方向滾動能力其實是父級樣式賦予的。
1.為了固定表頭我們需要先把表格的head和tbody切分到兩個table里： 和
里。
2.將table-body放在一個table-body-box的div里設(shè)置y軸方向可以滾動，x軸方向不可滾動，這樣表內(nèi)容就能在自己的區(qū)域?qū)崿F(xiàn)垂直方向的滾動了。
3.將table-head設(shè)置為absolute
4.將table-head和table-body-box的div放入一個table-box的div中，設(shè)置橫向x軸可以滾動，y軸不可滾動。
這樣兩個表就會在x方向滾動，y軸不滾動，表頭就垂直方向固定在垂直方向，橫向滾動在table-box出現(xiàn)滾動條的時候，內(nèi)部的表格頭和表格內(nèi)容因為沒有設(shè)置為fixed，所以會被滾動。
表頭和表內(nèi)容的橫向方向滾動能力（其實是父級overflow-x:scroll樣式賦予的）。表內(nèi)容的垂直方向滾動是通過表內(nèi)容外套的table-body-box設(shè)置overflow-y:scroll來實現(xiàn)的。
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.可以結(jié)合flex做到自適應(yīng)表頭和表格內(nèi)容
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54458.html
摘要：將設(shè)置為將和的放入一個的中，設(shè)置橫向軸可以滾動，軸不可滾動。表頭和表內(nèi)容的橫向方向滾動能力其實是父級樣式賦予的。 1.為了固定表頭我們需要先把表格的head和tbody切分到兩個table里： 和 里。 2.將table-body放在一個table-body-box的div里設(shè)置y軸方向可以滾動，x軸方向不可滾動，這樣表內(nèi)容就能在自己的區(qū)域?qū)崿F(xiàn)垂直方向的滾動了。3.將table-hea...
摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動 了嗎？ 序 在 Web 頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應(yīng)對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經(jīng)常...
摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動 了嗎？ 序 在 Web 頁面中，一個有高度或者寬度的容器是最常見的構(gòu)成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應(yīng)對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經(jīng)常...
摘要：作者注是基于擴(kuò)展的原生表格插件，設(shè)計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴(kuò)展的原生表格插件，設(shè)計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到j(luò)Query版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...
閱讀 4343·2023-04-25 20:41
閱讀 2870·2023-04-25 16:40
閱讀 1594·2021-09-23 11:44
閱讀 1390·2021-09-10 10:51
閱讀 2055·2021-09-07 09:59
閱讀 1990·2019-12-27 12:08
閱讀 730·2019-08-30 15:44
閱讀 3485·2019-08-30 11:08
