最近做的后台管理系统要处理大量的表格
原项目是采用的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. 【MYSQL】解决Mysql直接登录问题（删除匿名用户）(转)

    刚安装的Mysql会存在匿名用户. 在命令行下输入mysql,(如果这时提示不是外部或内部指令,那就把mysql server文件下的bin目录添加到系统路径Path中) 如果没有任何提示,直接进入& ...

  2. 深入理解Spring MVC 思想

    目录  一.前言二.spring mvc 核心类与接口三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明 ...

  3. CI框架主题切换的功能

    CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...

  4. Numpy 操作

    一.Numpy 属性 # 列表转化为矩阵 In []: arr = np.array([[,,],[,,]]) In []: arr Out[]: array([[, , ], [, , ]]) 1, ...

  5. Android融合推送MixPush SDK集成多家推送平台，共享系统级推送，杀死APP也能收到推送

    消息推送是App运营的重要一环,为了优化消息推送成功率,降低电量和流量消耗,系统级的推送服务显得尤为重要.小米和魅族由此推出了自家的推送平台,在MIUI和Flyme上共享系统级推送服务,让APP在被杀 ...

  6. 这是个巧妙的表达式: a ˆ= b ˆ= a ˆ= b 它不需要临时变量就可 以交换 a 和 b 的值。

    这不具有可移植性.它试图在序列点之间两次修改变量 a, 而这是无定义的. 例如,有人报告如下代码: int a = 123, b = 7654; a ^= b ^= a ^= b; 在 SCO 优化 ...

  7. Luogu P2807 三角形计数

    题目背景 三角形计数(triangle) 递推 题目描述 把大三角形的每条边n等分,将对应的等分点连接起来(连接线分别平行于三条边),这样一共会有多少三角形呢?编程来解决这个问题. 输入输出格式 输入 ...

  8. Linux配置全局jdk

    Linux配置全局jdk 1.确保相应文件夹下有apache-tomcat和jdk的压缩文件 注意:jdk文件必须为适应Linux版本的文件 (如果已经有了相应文件,可以跳过以下第2-3个步骤) 2. ...

  9. 605. Can Place Flowers种花问题【leetcode】

    Suppose you have a long flowerbed in which some of the plots are planted and some are not. However, ...

  10. while补充，字符串和数字的内置方法

    一.while循环的补充 while True: name=input('please input your name: ') password=input('please input your pa ...