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