需求的表格比较复杂（各种合并新增删除），elementUi的table组件无法满足需求，故而写了原生table，且与其他用了table组件的表格保持一致。

贴一下简单的代码，只实现操作按钮固定右侧以及底部滚动条功能：

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
　　width: 600px;
　　margin: 100px auto;
}
.fixedOper {
　　background-color: #fff;
　　position: absolute;
　　z-index: 100;
　　top: 0;
　　right: 0;
　　width: 104px;
　　height: 68px;
}
th,
td {
　　border: 1px solid #000;
　　height: 30px;
}
</style>
</head>
<body>
　　<!-- 第一层DIV固定宽度与定位 -->
　　<div style="width:100%;overflow-x: hidden;position: relative;">
　　　　<!-- 底部滚动条及样式 -->
　　　　<div style="width:100%;overflow-x: scroll;">
　　　　　　<!-- 表格宽度需大于父盒子的宽度才会出现滚动条 -->
　　　　　　<table style="width:120%;text-align: center;border-collapse: collapse;">
　　　　　　　　<thead>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<th>1</th>
　　　　　　　　　　　　<th>2</th>
　　　　　　　　　　　　<th>3</th>
　　　　　　　　　　　　<th style="position: absolute;z-index: 1000;right: 0;top:-0.5px;
　　　　　　　　　　　　　　width: 100px;">操作</th>
　　　　　　　　　　　　<th style="width:80px;"></th>
　　　　　　　　　　</tr>
　　　　　　　　</thead>
　　　　　　　　<tbody>
　　　　　　　　　　<tr>
　　　　　　　　　　　　<td>测试</td>
　　　　　　　　　　　　<td>测试</td>
　　　　　　　　　　　　<td>测试</td>
　　　　　　　　　　　　<td style="position: absolute;z-index: 1000;right: 0;top:33px;
　　　　　　　　　　　　　　width: 100px;">编辑</td>
　　　　　　　　　　</tr>
　　　　　　　　</tbody>
　　　　　　</table>
　　　　</div>
　　</div>
</body>
<script>
</script>
</html>
 
 
　　这里用div包裹table写定位的样式而不是直接在table上直接写定位，是为了避免IE浏览器卡死

原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死的更多相关文章

  1. css中左侧固定,右侧自适应

    谈谈我开始出来工作时候的一道面试题吧 当初我记得在太平洋网络面试的时候,面试官给我出了这么一道题: 有一个外层的div 中间有左右两个div 要求左侧的div 1.只告诉你宽度;       2.只告 ...

  2. css方法div固定在网页底部

    css .bottom{width:%;height:40px;background:#ededed;;}/*重点后两句*/ body <div class="bottom" ...

  3. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  4. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  5. table头部、尾部固定;中间内容定高自适应滚动

    table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...

  6. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  7. 页面元素固定在页面底部的纯css代码（兼容IE6）

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

  8. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  9. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

随机推荐

  1. 越来越火的"中台"是什么

    很多企业都将促进业务与科技的深度融合作为发展战略,也都想学学阿里的中台战略,其实,除了中台战略之外,基于企业级业务架构设计来实现组件化开发也是企业数字化转型的优选路径,是弥合业务与技术之间“数字鸿沟” ...

  2. 已实现乐观锁功能，FreeSql.DbContext 准备起航

    上回说到 FreeSql.DbContext 的规则,以及演示它的执行过程,可惜当时还不支持"乐观锁",对于更新数据来讲并不安全. FreeSql 核心库 v0.3.27 已提供乐 ...

  3. 使用BeautifulSoup和正则表达式爬取时光网不同地区top100电影并使用Matplotlib对比

    还有一年多就要毕业了,不准备考研的我要着手准备找实习及工作了,所以一直没有更新. 因为Python是自学不久,发现很久不用的话以前学过的很多方法就忘了,今天打算使用简单的BeautifulSoup和一 ...

  4. Centos7 nginx 虚拟主机、反向代理服务器及负载均衡，多台主机分离php-fpm实验，之强化篇，部署zabbix为例

    一.简介 1.由于zabbix是php得,所有lnmp环境这里测试用的上一个实验环境,请查看https://www.cnblogs.com/zhangxingeng/p/10330735.html : ...

  5. vue学习记录⑤（组件通信-父与子）

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  6. 学习笔记—CSS基础

    概念 CSS 指层叠样式表(Cascading Style Sheets), 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译. HTML只负责网页的内容,标签尽量只负责语意不负 ...

  7. 关于GITLAB若干权限问题

    访问权限 - Visibility Level 这个是在建立项目时就需要选定的,主要用于决定哪些人可以访问此项目,包含3种 Private - 私有,只有属于该项目成员才有原先查看 Internal ...

  8. 在keil中添加stc系列单片机型号(模型)方法

    1.下载安装stc-isp烧录软件: 官网:http://www.gxwmcu.com/ 2.打开使用stc-isp软件,并导入stc官方器件库: 注意:一定要找到包含有C51和UV4的文件夹 3.显 ...

  9. equals方法和==的区别--用实例简单说明

    首先我们创建一个类 public class People { private String name; private String address; public String getName() ...

  10. Ambari 常用的 REST API 介绍

    源码文档路径:ambari\ambari-server\docs\api\v1 swagger风格api文档:https://www.cnblogs.com/felixzh/p/10694724.ht ...