成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

ygyooo / 3152人閱讀

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

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

    

    

    
            
        

            
                
                
                
                
                
                
                
                
                
                
                
                
                
            
縮略圖
            標(biāo)題
            總價(jià)
            總銷(xiāo)量
            周銷(xiāo)量
            增幅
            商品評(píng)分
            分配開(kāi)發(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
                    張樂(lè)
                    abcadawdadawdawdadad
                    開(kāi)發(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
                        張樂(lè)
                        abcadawdadawdawdadad
                        開(kāi)發(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
                        張樂(lè)
                        abcadawdadawdawdadad
                        開(kāi)發(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
                        張樂(lè)
                        abcadawdadawdawdadad
                        開(kāi)發(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
                        張樂(lè)
                        abcadawdadawdawdadad
                        開(kāi)發(fā)成功
                        備注
                        上架:2016-07-02
                            采集:2018-06-25
                        增加

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

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

可以看出來(lái)還是沒(méi)有對(duì)齊，這里有兩個(gè)問(wèn)題，一是：表體加上滾動(dòng)條后會(huì)占約17px的寬度，第二個(gè)是表格的列寬table-layout默認(rèn)取值automatic是隨單元格內(nèi)容撐起來(lá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包裹起來(lái)，主要是由于表格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://m.hztianpu.com/yun/53182.html

相關(guān)文章

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

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

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

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

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

    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)論

閱讀需要支付1元查看
<