成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css手寫一個(gè)表頭固定

SQC / 3078人閱讀

摘要：等前端框架里面都對(duì)表頭固定，表格滾動(dòng)有實(shí)現(xiàn)，偏偏剛?cè)肼毜墓具x擇了手動(dòng)渲染表格，后期又覺得表格數(shù)據(jù)拉太長(zhǎng)想要做表頭固定。

Bootstrap,layui等前端框架里面都對(duì)表頭固定，表格滾動(dòng)有實(shí)現(xiàn)，偏偏剛?cè)肼毜墓具x擇了手動(dòng)渲染表格，后期又覺得表格數(shù)據(jù)拉太長(zhǎng)想要做表頭固定。為了避免對(duì)代碼改動(dòng)太大，所以決定手寫表頭固定
主要遇到的個(gè)問題就是固定以后數(shù)據(jù)表格與表頭的對(duì)齊問題，也看了很多我文章試下來都不怎么成功,只好自己一點(diǎn)點(diǎn)試
表頭固定的一般思路是布兩個(gè)table，一個(gè)放表頭，一個(gè)放表格體，然后將表格體加上高度height以及overflow-y

    

    

    
            
        

            
                
                
                
                
                
                
                
                
                
                
                
                
                
            
縮略圖
            標(biāo)題
            總價(jià)
            總銷量
            周銷量
            增幅
            商品評(píng)分
            分配開發(fā)
            SKU
            商品狀態(tài)
            審核備注
            時(shí)間
            操作
        

    

    

    

    
            
            

            
                
                
                
                
                
                
                
                
                
                
                
                
                
                

                    此處應(yīng)有圖片
                    Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                    0.99
                    13113
                    107
                    -21%
                    5.0
                    張樂
                    abcadawdadawdawdadad
                    開發(fā)成功
                    備注
                    上架:2016-07-02
                        采集:2018-06-25
                    增加
                

                

                        此處應(yīng)有圖片
                        Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        0.99
                        13113
                        107
                        -21%
                        5.0
                        張樂
                        abcadawdadawdawdadad
                        開發(fā)成功
                        備注
                        上架:2016-07-02
                            采集:2018-06-25
                        增加
                

                

                        此處應(yīng)有圖片
                        Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        0.99
                        13113
                        107
                        -21%
                        5.0
                        張樂
                        abcadawdadawdawdadad
                        開發(fā)成功
                        備注
                        上架:2016-07-02
                            采集:2018-06-25
                        增加
                

                

                        此處應(yīng)有圖片
                        Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        0.99
                        13113
                        107
                        -21%
                        5.0
                        張樂
                        abcadawdadawdawdadad
                        開發(fā)成功
                        備注
                        上架:2016-07-02
                            采集:2018-06-25
                        增加
                

                

                        此處應(yīng)有圖片
                        Plain Solid Throw Home Decor Pillow Case Bed Sofa Waist Cushion Cover Multicolor
                        0.99
                        13113
                        107
                        -21%
                        5.0
                        張樂
                        abcadawdadawdawdadad
                        開發(fā)成功
                        備注
                        上架:2016-07-02
                            采集:2018-06-25
                        增加

兩個(gè)table定義的不一致也就導(dǎo)致了表頭與表格的不對(duì)齊，這里需要使用將兩個(gè)表格的列寬定義一致

在兩個(gè)table標(biāo)簽下都定義一下相同的,注意列數(shù)與表格列數(shù)相同，最后一列可以不要定義固定的寬

可以看出來還是沒有對(duì)齊，這里有兩個(gè)問題，一是：表體加上滾動(dòng)條后會(huì)占約17px的寬度，第二個(gè)是表格的列寬table-layout默認(rèn)取值automatic是隨單元格內(nèi)容撐起來的，所以要對(duì)這兩個(gè)做調(diào)整。我的方法是給表頭加一個(gè)padding_right:17px;兩個(gè)table都設(shè)定為table-layout：fixed
css代碼

        .content{
            width: 80%;
        }
        table {
            width: 100%;
            border-collapse : collapse; 
            border:1px solid #ccc;
            color:#4c4c4c;
        }
        th,td{
            padding:5px;
        }
        .table_body{
            height:312px;
            overflow-y: scroll;
        }
        .table_head{
            padding-right: 17px;
        }
        .table_body table,.table_head table{
            table-layout: fixed;
        }

這樣就完美對(duì)齊了，適合任意屏幕寬度

有幾個(gè)需要注意的地方我的兩個(gè)表格都使用div包裹起來，主要是由于表格display:table屬性導(dǎo)致padding,overflow等屬性很難設(shè)置上去，因此可以設(shè)置到外包裹的div上，畢竟table布局水真的深，一時(shí)還不敢碰

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114141.html

相關(guān)文章

  • css手寫一個(gè)表頭固定

    摘要：等前端框架里面都對(duì)表頭固定，表格滾動(dòng)有實(shí)現(xiàn)，偏偏剛?cè)肼毜墓具x擇了手動(dòng)渲染表格，后期又覺得表格數(shù)據(jù)拉太長(zhǎng)想要做表頭固定。 Bootstrap,layui等前端框架里面都對(duì)表頭固定，表格滾動(dòng)有實(shí)現(xiàn)，偏偏剛?cè)肼毜墓具x擇了手動(dòng)渲染表格，后期又覺得表格數(shù)據(jù)拉太長(zhǎng)想要做表頭固定。為了避免對(duì)代碼改動(dòng)太大，所以決定手寫表頭固定 主要遇到的個(gè)問題就是固定以后數(shù)據(jù)表格與表頭的對(duì)齊問題，也看了很多我...

    ygyooo 評(píng)論0 收藏0

  • bootstrap-table實(shí)現(xiàn)表頭固定以及列固定

    摘要：之前使用寫了一個(gè)報(bào)表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進(jìn)行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研究起來，畢竟我是個(gè)后端啊，對(duì)于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入 之前使用bootstrap寫了一個(gè)報(bào)表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進(jìn)行固定，這樣的話方便查看數(shù)據(jù)，于是，我開始了苦逼的研...

    B0B0 評(píng)論0 收藏0

  • 移動(dòng)端實(shí)現(xiàn)表頭固定，tbody滾動(dòng)，三種方法

    摘要：實(shí)現(xiàn)表頭固定，垂直滾動(dòng)準(zhǔn)備工作獲取頁(yè)面可是區(qū)域高度屏幕旋轉(zhuǎn)觸發(fā)事件正常方向或者屏幕旋轉(zhuǎn)豎屏屏幕順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)橫屏方法一兩個(gè)思路第一個(gè)放表頭，第二個(gè)方內(nèi)容。 實(shí)現(xiàn)表頭固定，tbody垂直滾動(dòng)準(zhǔn)備工作： 獲取頁(yè)面可是區(qū)域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    AlphaWallet 評(píng)論0 收藏0

  • 移動(dòng)端實(shí)現(xiàn)表頭固定，tbody滾動(dòng)，三種方法

    摘要：實(shí)現(xiàn)表頭固定，垂直滾動(dòng)準(zhǔn)備工作獲取頁(yè)面可是區(qū)域高度屏幕旋轉(zhuǎn)觸發(fā)事件正常方向或者屏幕旋轉(zhuǎn)豎屏屏幕順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)橫屏方法一兩個(gè)思路第一個(gè)放表頭，第二個(gè)方內(nèi)容。 實(shí)現(xiàn)表頭固定，tbody垂直滾動(dòng)準(zhǔn)備工作： 獲取頁(yè)面可是區(qū)域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    bluesky 評(píng)論0 收藏0

  • 移動(dòng)端實(shí)現(xiàn)表頭固定，tbody滾動(dòng)，三種方法

    摘要：實(shí)現(xiàn)表頭固定，垂直滾動(dòng)準(zhǔn)備工作獲取頁(yè)面可是區(qū)域高度屏幕旋轉(zhuǎn)觸發(fā)事件正常方向或者屏幕旋轉(zhuǎn)豎屏屏幕順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)橫屏方法一兩個(gè)思路第一個(gè)放表頭，第二個(gè)方內(nèi)容。 實(shí)現(xiàn)表頭固定，tbody垂直滾動(dòng)準(zhǔn)備工作： 獲取頁(yè)面可是區(qū)域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    twohappy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<