国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css手寫一個表頭固定

SQC / 3065人閱讀

摘要：等前端框架里面都對表頭固定，表格滾動有實現，偏偏剛入職的公司選擇了手動渲染表格，后期又覺得表格數據拉太長想要做表頭固定。

Bootstrap,layui等前端框架里面都對表頭固定，表格滾動有實現，偏偏剛入職的公司選擇了手動渲染表格，后期又覺得表格數據拉太長想要做表頭固定。為了避免對代碼改動太大，所以決定手寫表頭固定
主要遇到的個問題就是固定以后數據表格與表頭的對齊問題，也看了很多我文章試下來都不怎么成功,只好自己一點點試
表頭固定的一般思路是布兩個table，一個放表頭，一個放表格體，然后將表格體加上高度height以及overflow-y

    

    

    
            
        

            
                
                
                
                
                
                
                
                
                
                
                
                
                
            
縮略圖
            標題
            總價
            總銷量
            周銷量
            增幅
            商品評分
            分配開發
            SKU
            商品狀態
            審核備注
            時間
            操作
        

    

    

    

    
            
            

            
                
                
                
                
                
                
                
                
                
                
                
                
                
                

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

                

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

                

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

                

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

                

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

兩個table定義的不一致也就導致了表頭與表格的不對齊，這里需要使用將兩個表格的列寬定義一致

在兩個table標簽下都定義一下相同的,注意列數與表格列數相同，最后一列可以不要定義固定的寬

可以看出來還是沒有對齊，這里有兩個問題，一是：表體加上滾動條后會占約17px的寬度，第二個是表格的列寬table-layout默認取值automatic是隨單元格內容撐起來的，所以要對這兩個做調整。我的方法是給表頭加一個padding_right:17px;兩個table都設定為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;
        }

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114141.html

相關文章

  • css手寫一個表頭固定

    摘要：等前端框架里面都對表頭固定，表格滾動有實現，偏偏剛入職的公司選擇了手動渲染表格，后期又覺得表格數據拉太長想要做表頭固定。 Bootstrap,layui等前端框架里面都對表頭固定，表格滾動有實現，偏偏剛入職的公司選擇了手動渲染表格，后期又覺得表格數據拉太長想要做表頭固定。為了避免對代碼改動太大，所以決定手寫表頭固定 主要遇到的個問題就是固定以后數據表格與表頭的對齊問題，也看了很多我...

    ygyooo 評論0 收藏0

  • bootstrap-table實現表頭固定以及列固定

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

    B0B0 評論0 收藏0

  • 移動端實現表頭固定，tbody滾動，三種方法

    摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。 實現表頭固定，tbody垂直滾動準備工作： 獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    AlphaWallet 評論0 收藏0

  • 移動端實現表頭固定，tbody滾動，三種方法

    摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。 實現表頭固定，tbody垂直滾動準備工作： 獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    bluesky 評論0 收藏0

  • 移動端實現表頭固定，tbody滾動，三種方法

    摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。 實現表頭固定，tbody垂直滾動準備工作： 獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

    twohappy 評論0 收藏0

發表評論

0條評論

SQC

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<