這篇文章主要介紹如何利用純css實現(xiàn)table固定列與表頭中間橫向滾動的，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、婁星ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的婁星網(wǎng)站制作公司

文字被強(qiáng)制換行了

由于個別表的列數(shù)較多;文字都擠在一起向下?lián)Q行了;現(xiàn)場慘不忍睹;于是采用強(qiáng)制不換行的方式

新的問題是強(qiáng)制換行之后整個寬度超出了body

于是考慮到把table重要的列給固定掉;中間用橫向滾動條來拖動;

• 考慮到要做固定列;于是要把table拆分出來;然后用浮動把table還原;下面這個案例就是把一個table拆成三個;然后浮動起來還原

• 考慮到要做自適應(yīng);于是采用百分比來做;

    
        
        
            首列
        
        
        
        
            首列
        
        
    

    
        
        
            中間列
        
        
        
        
            中間列
        
        
    

    
        
        
            尾列
        
        
        
        
            尾列
        
        
    

于是上面這個案例就完成了

還有一點是中間table的表頭也需要固定 不能隨下面的額tbody去滑動;我這里采取的思路是用定位去做;既然上面都是用百分比去做;那么定位的left值也是百分比;這里就不上代碼了

以上是“如何利用純css實現(xiàn)table固定列與表頭中間橫向滾動的”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：如何利用純css實現(xiàn)table固定列與表頭中間橫向滾動的-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/diccph.html