需求的表格比较复杂（各种合并新增删除），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. 系统的讲解 - PHP WEB 安全防御

    目录 常见漏洞 SQL注入攻击 XSS攻击 SSRF攻击 CSRF攻击 文件上传漏洞 信息泄露 越权 设计缺陷 小结 常见漏洞 看到上图的漏洞是不是特别熟悉,如果不进行及时防御,就会产生蝴蝶效应. 往 ...

  2. vue中的 ref 和 $refs

    如图,ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例: ...

  3. Docker入门学习

    Python爬虫 最近断断续续的写了几篇Python的学习心得,由于有开发经验的同学来说上手还是比较容易,而且Python提供了强大的第三方库,做一个小的示例程序还是比较简单,这不我之前就是针对Pyt ...

  4. 基于 websocket 实现的 im 实时通讯案例

    分享利用 redis 订阅与发布特性,巧妙的现实高性能im系统.为表诚意,先贴源码地址:https://github.com/2881099/im 下载源码后的运行方法: 运行环境:.NETCore ...

  5. JS原型--原型链

    构造函数-->原型--->prototype-->__proto__-->constructor-->原型链 构造函数    什么是构造函数?我理解构造函数就是可以用来生 ...

  6. Gradle入门到实战(二) — ImageOptimization安卓图片转换压缩插件

    上一篇我们了解了Gradle的各个方面,本篇介绍一款安卓图片优化转换插件,目前已在项目中使用,可一键批量转换压缩图片,webp转换与png/jpg压缩就是那么简单 GitHub项目地址:ImageOp ...

  7. Nuget（BagGet）使用教程

    Nuget(BagGet)使用教程 1. 服务器安装ASP.NET Core 网上有很多教程,不多讲,链接给你:https://www.cnblogs.com/Agui520/p/8331499.ht ...

  8. 结合JDK源码看设计模式——原型模式

    定义: 指原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.不需要知道任何创建的细节,不调用构造函数适用场景: 类初始化的时候消耗较多资源 new产生的对象需要非常繁琐的过程 构造函数比较 ...

  9. Element表格嵌入复选框以及单选框

    1,element 表格嵌入CheckBox 效果图如下:  2,element结合checkBox实现单选效果如下: html代码: <template> <div> < ...

  10. 002-如何理解Java的平台独立性

    本文首发于公众号:javaadu Java有句非常有名的口号--"一次编写,到处运行",依靠的就是JVM提供的平台独立性,本质上来讲,就是通过虚拟机技术,通过限制一些功能,达到屏蔽 ...