亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用純css實(shí)現(xiàn)table固定列與表頭中間橫向滾動(dòng)的思路和實(shí)例

  發(fā)布時(shí)間:2017-09-11 15:38:14   作者:馮凱昌   我要評(píng)論
這篇文章主要給大家介紹了關(guān)于如何利用純css實(shí)現(xiàn)table固定列與表頭,中間橫向滾動(dòng)的相關(guān)資料,文中通過(guò)示例代碼詳細(xì)的給大家介紹了關(guān)于實(shí)現(xiàn)該效果的思路與方法,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。

前言

最近在做的后臺(tái)管理系統(tǒng)要處理大量的表格,因?yàn)樵?xiàng)目是采用的for循環(huán)加拼接字符串的方式實(shí)現(xiàn);導(dǎo)致js代碼一大堆;各種單引號(hào)和雙引號(hào)的嵌套;讓人頭疼;遂引入vue.js;用v-for做模板渲染;工作量頓時(shí)減輕不少,心情舒暢;

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

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

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

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

于是考慮到把table重要的列給固定掉;中間用橫向滾動(dòng)條來(lái)拖動(dòng);

<style>
div{
    white-space: nowrap;
    overflow: hidden;//控制溢出隱藏
    overflow-x: scroll;//設(shè)置橫向滾動(dòng)條
}
</style>
  • 考慮到要做固定列;于是要把table拆分出來(lái);然后用浮動(dòng)把table還原;下面這個(gè)案例就是把一個(gè)table拆成三個(gè);然后浮動(dòng)起來(lái)還原
  • 考慮到要做自適應(yīng);于是采用百分比來(lái)做;
<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>

于是上面這個(gè)案例就完成了

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論