最近做的后台管理系统要处理大量的表格
原项目是采用的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. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  2. java核心技术面试整理

    [前方高能,是这半年BAT,京东,远景,华为,中兴以及苏研发中心被问到的Java公共问题的一个整理] ------------------------------------------------- ...

  3. Python爬虫番外篇之关于登录

    常见的登录方式有以下两种: 查看登录页面,csrf,cookie;授权:cookie 直接发送post请求,获取cookie 上面只是简单的描述,下面是详细的针对两种登录方式的时候爬虫的处理方法 第一 ...

  4. Java基础之String类

    String类 字符串是不可变的,对其做的任何改变,会生成一个对象,不会改变有原有对象. ==和equals() String s1 = "good"; String s2 = & ...

  5. [算法题] Reverse Linked List II

    题目内容 题目来源:LeetCode Reverse a linked list from position m to n. Do it in-place and in one-pass. For e ...

  6. iOS枚举的运用

    1.什么是枚举? 枚举其实就是一个整型常数的集合,最简单的例子就是表示星期的SUN, MON, TUE, WED, THU, FRI,SAT, 就是一个枚举. 2.iOS中枚举的使用 在ObjC中可以 ...

  7. Qt样式表使用注意项

    Qt样式表使用注意项 <1>.StyleSheet的使用StyleSheet文件的默认后缀名为qss,可以通过命令行参数-stylesheet filename.qss来设置样式表,也可以 ...

  8. html常用的基本标签

    html的基本标签 一.head部分的标签 1.<!DOCTYPE html>文档类型声明,让浏览器按照html标准对代码进行解释与执行:文档类型声明必不可少,而且,必须在文档最上方:如果 ...

  9. css基础内容之background

    html如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. [Python] wxPython 状态栏组件、消息对话框组件 学习总结(原创)

    1.状态栏组件 1.基本介绍 上图: 红框框内的就是状态栏. 他可以分成若干个区块,比如上者分为了两个区块,并且比例是固定的,创建时可以指定 每个区块都能够显示 信息,一般通过 绑定事件 实时更新 各 ...