如何利用純css實(shí)現(xiàn)table固定列與表頭中間橫向滾動的

發(fā)布時間：2021-03-19 14:20:24 來源：億速云閱讀：821 作者：小新欄目：web開發(fā)

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

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

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

<style>
div{
     white-space: nowrap;//強(qiáng)制不折行
}
</style>

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

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

<style>
div{
    white-space: nowrap;
    overflow: hidden;//控制溢出隱藏
    overflow-x: scroll;//設(shè)置橫向滾動條
}
</style>

考慮到要做固定列;于是要把table拆分出來;然后用浮動把table還原;下面這個案例就是把一個table拆成三個;然后浮動起來還原
考慮到要做自適應(yīng);于是采用百分比來做;

<style>
    div{
        width: 100%;
        white-space: nowrap;
    }
    table td{
        border: 1px solid #000;
    }
    .tab1{
        width: 20%;
        float: left;
    }
    .tab2{
        width: 70%;
        float: left;
        overflow: hidden;
        overflow-x: scroll;
    }
    .tab3{
        width: 10%;
        float: left;
    }
</style>
<body>
<div>
    <table class="tab1">
        <thead>
        <tr>
            <th>首列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>首列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab2">
        <thead>
        <tr>
            <th>中間列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>中間列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab3" >
        <thead>
        <tr>
            <th>尾列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>尾列</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

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

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

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

向AI問一下細(xì)節(jié)

如何利用純css實(shí)現(xiàn)table固定列與表頭中間橫向滾動的

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽