需求的表格比较复杂（各种合并新增删除），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. .NET Core IdentityServer4实战 第二章-OpenID Connect添加用户认证

    内容:本文带大家使用IdentityServer4进行使用OpenID Connect添加用户认证 作者:zara(张子浩) 欢迎分享,但需在文章鲜明处留下原文地址. 在这一篇文章中我们希望使用Ope ...

  2. 微服务（入门三）：netcore ocelot api网关结合consul服务发现

    简介 api网关是提供给外部调用的统一入口,类似于dns,所有的请求统一先到api网关,由api网关进行指定内网链接. ocelot是基于netcore开发的开源API网关项目,功能强大,使用方便,它 ...

  3. CBC 字节反转攻击

    一.CBC 简介 现代密码体制 现代密码中的加密体制一般分为对称加密体制(Symmetric Key Encryption)和非对称加密体制(Asymmetric Key Encryption).对称 ...

  4. 结合JDK源码看设计模式——单例模式

    定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...

  5. HTML入门知识汇总

    1. HTML认识 1.1 什么是HTML HTML是描述(制作)网页的语言,指的是超文本标记语言(Hyper Text Markup Language). 超文本:就是指页面内可以包含图片.链接.甚 ...

  6. 好代码是管出来的——使用Jenkins搭建CI服务器

    Jenkins是一个开源的跨平台的CI工具,它可以部署在Windows.Linux等平台上,并且Jenkins提供了非常丰富的插件来帮助完成编译.测试.部署等工作. 本文将介绍在Windows平台上使 ...

  7. 访问System x3650 IMM2的几种方式

    一.通过web浏览器访问 1.打开浏览器,在地址栏上输入IMM2的IP地址访问,打开登录页面后,输入用户名和密码 登录 PS:第一次登录IMM2时,初始的用户名为USERID,密码为PASSW0RD( ...

  8. 解决Windows10运行VMware Workstation出现与Device Guard不兼容导致无法运行与创建虚拟机问题

    问题表现如下: 1.有Hyper-V功能未关闭的可能, 随便贴一个链接,网上一样的方法很多: https://jingyan.baidu.com/article/9f63fb916b50e1c8400 ...

  9. ZJOI2019二轮游记

    Postscript 这个彩笔的省选随心游被中考实验考试坑掉了 所以前两天都一直脱离部队,第一天讲课完了才有的过去 一轮凉了那么二轮翻盘?翻车预定.之后还有上海的ACM没有CXR神仙的ACM窝怎么打啊 ...

  10. JAVAFX之tableview界面实时刷新导致的内存溢出（自己挖的坑，爬着也要出来啊0.0）

    这几天遇到了一个问题,不幸开发的一个cs架构的工具,客户端开启后,内存一直在缓慢增长最终导致进程卡死,花了4天时间,终于爬出来了... 客户端通过timer定时器每30秒查询一次数据库以及一些业务逻辑 ...