原生 table css實(shí)現(xiàn)操作按鈕固定右側(cè)及底部滾動(dòng) IE不會(huì)卡死

william 發(fā)布于2019-04-23 11:49 / 2298人閱讀

摘要：貼一下簡(jiǎn)單的代碼，只實(shí)現(xiàn)操作按鈕固定右側(cè)以及底部滾動(dòng)條功能第一層固定寬度與定位底部滾動(dòng)條及樣式表格寬度需大于父盒子的寬度才會(huì)出現(xiàn)滾動(dòng)條操作測(cè)試測(cè)試測(cè)試編輯這里用包裹寫定位的樣式而不是直接在上直接寫定位，是為了避免瀏覽器卡死

需求的表格比較復(fù)雜（各種合并新增刪除），elementUi的table組件無法滿足需求，故而寫了原生table，且與其他用了table組件的表格保持一致。

貼一下簡(jiǎn)單的代碼，只實(shí)現(xiàn)操作按鈕固定右側(cè)以及底部滾動(dòng)條功能：

Document
　　　　

1	2	3	操作
測(cè)試	測(cè)試	測(cè)試	編輯

? ? 　　這里用div包裹table寫定位的樣式而不是直接在table上直接寫定位，是為了避免IE瀏覽器卡死

云服務(wù)器 GPU云服務(wù)器固定頁(yè)面底部底部按鈕服務(wù)器底部按鈕是什么原生js滾輪滾動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1202.html

相關(guān)文章

一些css基礎(chǔ)學(xué)習(xí)筆記

摘要：當(dāng)父元素設(shè)置了的，子元素為時(shí)，設(shè)置無效當(dāng)父元素設(shè)置了時(shí)，子元素超出父元素部分無效只能限制的層級(jí)相當(dāng)于自身進(jìn)行定位，相對(duì)于邊界會(huì)影響其他元素定位，而無影響自定義拖拽效果同時(shí)存在，無效同理，無效可提高層疊級(jí)數(shù)父元素的較大排前面數(shù)值排在上，當(dāng)前層 relative 1.當(dāng)父元素設(shè)置了relative的zindex，子元素為absolute時(shí)，設(shè)置zindex無效2.當(dāng)父元素relative設(shè)...

cgh1999520 2019-08-29 16:12 評(píng)論0 收藏0
寫網(wǎng)頁(yè)時(shí)拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。 content-box：在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。 border-box：（textarea和select默認(rèn)值）在規(guī)定的一個(gè)框的寬高之內(nèi)給這...

econi 2019-08-20 18:21 評(píng)論0 收藏0
寫網(wǎng)頁(yè)時(shí)拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。 content-box：在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。 border-box：（textarea和select默認(rèn)值）在規(guī)定的一個(gè)框的寬高之內(nèi)給這...

rubyshen 2019-08-29 13:03 評(píng)論0 收藏0
寫網(wǎng)頁(yè)時(shí)拿起就用的小技巧

摘要：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。和默認(rèn)值在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。 1. box-sizing：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。 content-box：在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。 border-box：（textarea和select默認(rèn)值）在規(guī)定的一個(gè)框的寬高之內(nèi)給這...

QiShare 2019-08-01 17:16 評(píng)論0 收藏0
用 ES6 寫全屏滾動(dòng)插件

摘要：這篇文章將介紹如何使用原生主要使用語法實(shí)現(xiàn)全屏滾動(dòng)插件，兼容手機(jī)觸屏，觸摸板優(yōu)化，支持自定義頁(yè)面動(dòng)畫，壓縮后文件只有。這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實(shí)現(xiàn)全屏滾動(dòng)插件，兼容 IE 10+、手機(jī)觸屏，Mac 觸摸板優(yōu)化，支持自定義頁(yè)面動(dòng)畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點(diǎn)這查看 demo。 1）前面的話...

liuchengxu 2019-08-26 11:52 評(píng)論0 收藏0