运用纯css完成table固定不动列与表头正中间横向翻

日期：2021-03-02 类型：科技新闻我要分享

关键词：小程序如何制作，预约小程序，微信小程序怎么做，微信抽奖小程序，小程序外包

序言

近期在做的后台管理管理方法系统软件要解决很多的报表，由于原新项目是选用的for循环系统加拼接标识符串的方法完成;致使js编码1大堆;各种各样单引号和双引号的嵌套循环;令人头疼;遂引进vue.js;用v-for做模版3D渲染;工作中量猛然减轻很多,情绪舒适;

文本被强制性换行了

因为某些表的列数较多;文本都挤在1起向下换行了;当场不忍直视;因而选用强制性不换行的方法

<style>
div{
     white-space: nowrap;//强制性不折行
}
</style>

新的难题是强制性换行以后全部宽度超过了body

因而考虑到到把table关键的列给固定不动掉;正中间用横向翻转条来拖拽;

<style>
div{
    white-space: nowrap;
    overflow: hidden;//操纵外溢掩藏
    overflow-x: scroll;//设定横向翻转条
}
</style>

考虑到到要做固定不动列;因而要把table拆分出来;随后用波动把table复原;下面这个实例便是把1个table拆成3个;随后波动起来复原
考虑到到要做自融入;因而选用百分比来做;

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

因而上面这个实例就进行了

也有1点是正中间table的表头也必须固定不动不可以随下面的额tbody去拖动;我这里采用的思路是用精准定位去做;既然上面全是用百分比去做;那末精准定位的left值也是百分比;这里就不上编码了

总结

以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值，假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用。

上一篇：详解css display:box 新特性返回下一篇：没有了