最近做的后台管理系统要处理大量的表格
原项目是采用的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. jqthumb.js缩略图插件-让缩略图正常显示而不变形

    插件介绍 项目中有图片的时候,有的宽大于高,有的宽小于高,尤其在做图片列表的时候,经常发现缩略图会有变形的.我们怎样来解决这一问题呢. 方法一:用photoshop来处理缩略图.小的项目还可以,大的项 ...

  2. LoadRunner性能测试-loadrunner工具破解

    Loadrunner11破解 破解工具下载:http://pan.baidu.com/disk/home?errno=0&errmsg=Auth%20Login%20Sucess&&a ...

  3. 关于Django的理解

    Django的理解 Django的核心是中间件, 所有的请求和响应都会经过中间件 中间件是一个钩子框架, 它们可以介入请求的响应处理过程, 它用于在全局修改Django的输入和输出 Django有以下 ...

  4. Python操作Zip文件

    Python操作Zip文件 需要使用到zipfile模块 读取Zip文件 随便一个zip文件,我这里用了bb.zip,就是一个文件夹bb,里面有个文件aa.txt. import zipfile # ...

  5. Qt5.5.1和Qt5.3.2编译OCI驱动教程及验证方法

    我们都知道oracle数据库的强大,并且好多企业或者教学用到数据库时都会推荐使用.但是Qt因为版权问题没有封装oracle数据库专用驱动,网上也有一大堆说法和教程,但是或多或少的都有问题.下面废话不多 ...

  6. Hibernate批量操作（一）

    在项目的开发过程之中,我们常会遇到数据的批量处理问题.在持久层采用Hibernate框架时,在进行批量操作时,需要考虑Hibernate实现机制带来的一些问题. 我们知道在每个Hibernate Se ...

  7. ASP.NET 导出excel文件出现乱码的解决办法

    string html =TABLE ;//<table>标签,可以是多张表string modified = Regex.Replace(html, "<table &g ...

  8. 微信小程序（有始有终，全部代码）开发--- 新增【录音】以及UI改进

    开篇语 寒假发了一篇练手文章,不出意外地火了: <简年15: 微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器 > 后来又发了BUG修复的版本,出乎意料的火了: 简年18: ...

  9. 菜鸟的 Sass 学习笔记

    介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade C ...

  10. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...