最近做的后台管理系统要处理大量的表格
原项目是采用的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. JVM GC（整理）

    1 GC类型 1 )YGC  一般情况下,当新对象生成,并且在Eden申请空间失败时,就好触发YGC ,堆Eden区域进行GC,清除非存活对象,并且把尚且存活的对象移动到Survivor区.然后整理S ...

  2. python3网络编程之socket

    文章内容: socket介绍 socket参数介绍 流程描述 socket对象内建方法 基本socket实例 通过socket实现简单ssh并实现接收大数据 socket介绍 socket又称&quo ...

  3. Easy DataGrid 实现动态列、行

    Easy DataGrid 实现动态列.行 前端代码: <title>展示销售的实时数据</title> <script type="text/javascri ...

  4. 设置webstorm缩写代码

    文件 ->设置->编辑器->活动模板->找到需要设置的文件类型(比如JavaScript)-->添加-(右上角)->设置模板之后,注意最后需要defind才能生效

  5. 微信小程序开发

    一.基本的准备工作 1.工具安装 工具是有微信官方提供. 2.下载地址: windows32位:https://servicewechat.com/wxa-dev-logic/download_red ...

  6. swift UILabel多行显示时 计算UILable的高度（可用于UILable高度自适应）

    代码如下 func heightForView(text:String, font:UIFont, width:CGFloat) -> CGFloat{ let label:UILabel = ...

  7. nginx实现请求的负载均衡 + keepalived实现nginx的高可用

    前言 使用集群是网站解决高并发.海量数据问题的常用手段.当一台服务器的处理能力.存储空间不足时,不要企图去换更强大的服务器,对大型网站而言,不管多么强大的服务器,都满足不了网站持续增长的业务需求.这种 ...

  8. 【IP限制】验证是否限制了境外IP访问权限

    为啥要限制境外IP访问咱们的网站或者服务呢?怕泄漏了"机密"(好像都是我们在山寨别人,哪儿TM有机密,那叫"鸡贼") 好像国外的网站也没有限制咱大陆客去访问,反 ...

  9. javascript+HTMl5游戏下载，开发一个都能月薪上万！舅服你

    HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,H ...

  10. JavaScript基础知识（一）

    一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...