最近做的后台管理系统要处理大量的表格
原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅;
文字被强制换行了
由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式
<style>

div{

     white-space: nowrap;//强制不折行

}

</style>
新的问题是强制换行之后整个宽度超出了body
于是考虑到把table重要的列给固定掉;中间用横向滚动条来拖动;
<style>

div{

    white-space: nowrap;

    overflow: hidden;//控制溢出隐藏

    overflow-x: scroll;//设置横向滚动条

}

</style>

  • 考虑到要做固定列;于是要把table拆分出来;然后用浮动把table还原;下面这个案例就是把一个table拆成三个;然后浮动起来还原

  • 考虑到要做自适应;于是采用百分比来做;

<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>
于是上面这个案例就完成了
还有一点是中间table的表头也需要固定 不能随下面的额tbody去滑动;我这里采取的思路是用定位去做;既然上面都是用百分比去做;那么定位的left值也是百分比;这里就不上代码了

更多内容关注我的个人博客 www.fengkaichang.com

纯css实现table表格固定列和表头,中间横向滚动的思路-附案例的更多相关文章

  1. 纯CSS实现table表头固定（自创备忘）

    因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...

  2. layui table 数据表格固定列的行高和table其他列的行高不一致

    1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...

  3. 5种做法实现table表格中的斜线表头效果

    table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

  4. JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 纯css控制－表格表头固定,内容多时滚动内容

    <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } /*所有内 ...

  6. CSS表格固定列宽

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. table 表格固定表头和第一列、内容可滚动

    整理了下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. table表格固定前几列，其余的滚动

    我查了好多资料,只找到一个demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""h ...

  9. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

随机推荐

  1. github 发布项目

    自己开发了一个插件或项目,需要发布到github上,之前看到很多文章,但是都会有一些问题,经过自己多次尝试,想分享给初学者们. 首先你需要一个github账号,所有还没有的话先去注册吧! 官网:htt ...

  2. year:2017 month:8 day:1+

    2017-08-01 JAVAse 方法的重载:在同一个类中存在一个以上的同名方法,只要他们的参数数量,参数类型,参数顺序(两个相同类型的参数是不行的)这样就构成了方法的重载. 有返回值的方法有三种调 ...

  3. Redis-位图法实现简单统计

    比如一个网站有1亿个用户, 现在要统计一周内连续登录的用户 方法: 可以用一个字节8个位表示7个人, 首位不算固定为0, 若某人周一登录则置为1, 没登录则为0 127.0.0.1:6379> ...

  4. Open-Falcon第七步安装报警模块（小米开源互联网企业级监控系统）

    sender调用各个公司提供的mail-provider和sms-provider,按照某个并发度,从redis中读取邮件.短信并发送,alarm生成的报警短信和报警邮件都是直接写入redis即可,s ...

  5. Java 垃圾回收算法

    在之前Java 运行期数据区一文中,介绍了运行时内存的各个部分.其中程序计数器.虚拟机栈.本地方法栈都随线程消亡,所以,这几个区域的内存分配和回收都具备确定性.而 Java 堆和方法区不同,我们只有在 ...

  6. equals()与 == 比较，hashCode方法

    1.Object类    Object类是java中一切类的父类,java中所有的类都直接或间接    继承自Object类        Object中定义的方法不多,原因在于,java的类多种多样 ...

  7. C语言库函数探究

    1.strlen()求字符串长度 //模拟实现strlen函数 #include<stdio.h> #include<stdlib.h> #include<string. ...

  8. 从零入手微信小程序开发

    前言: 哈哈,发现我写的随笔都是项目驱使的.当然,这篇也是项目驱使的咯,前段时间领导在玩微信时候发现了微信小程序的好处,流程,切换速度快等,然后就让小弟研究研究小程序的实现. 补充下,博客大多都是处理 ...

  9. 【HOSTS相关】前端提供测试模板地址

    在测试接口的时候,首先需要绑定HOSTS,这个文件的位置在这个目录的下面:C:\WINDOWS\system32\drivers\etc,打开hosts文件的方式选择"记事本"就可 ...

  10. python——序列 & 集合 & 映射

    列表 & 元组 & 字典 & 集合 序列 序列: 每个元素可以是任何类型(也可以是序列),每个元素被分配一个序号(从0开始)(序号,也叫索引,表示元素的位置) Python中的 ...