需求的表格比较复杂（各种合并新增删除），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. 【开源】OSharpNS，轻量级.net core快速开发框架发布

    OSharpNS简介 OSharp Framework with .NetStandard2.0(OSharpNS)是OSharp的以.NetStandard2.0为目标框架,在AspNetCore的 ...

  2. go语言调度器源代码情景分析之五：汇编指令

    本文是<go调度器源代码情景分析>系列 第一章 预备知识的第4小节. 汇编语言是每位后端程序员都应该掌握的一门语言,因为学会了汇编语言,不管是对我们调试程序还是研究与理解计算机底层的一些运 ...

  3. 如何在ASP.NET Core中自定义Azure Storage File Provider

    文章标题:如何在ASP.NET Core中自定义Azure Storage File Provider 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p ...

  4. 关于windows系统无法更新的解决方法

    操作系统无法更新解决方案! 1．检查网络连接是否正常: 2．检查控制面板设置,windows更新是否开启: 3．检查计算机-管理-服务和应用程序-服务组件里的windows update是否开启: 4 ...

  5. #ifndef, #define, #endif 作用

    #ifndef, #define, #endif 作用 https://www.cnblogs.com/challenger-vip/p/3386819.html

  6. MonacoEditor 主动触发代码提示功能

    MonacoEditor是微软提供的代码编辑器 vscode即是使用它作为编辑器. 它的开发语言是ts,可以嵌入到浏览器中. 代码提示或者说代码补全功能是我们经常需要定制的部分. 目前它提供的快捷键是 ...

  7. 【死磕 Spring】----- IOC 之深入理解 Spring IoC

    在一开始学习 Spring 的时候,我们就接触 IoC 了,作为 Spring 第一个最核心的概念,我们在解读它源码之前一定需要对其有深入的认识,本篇为[死磕 Spring]系列博客的第一篇博文,主要 ...

  8. [Inside HotSpot] C1编译器工作流程及中间表示

    1. C1编译器线程 C1编译器(aka Client Compiler)的代码位于hotspot\share\c1.C1编译线程(C1 CompilerThread)会阻塞在任务队列,当发现队列有编 ...

  9. 开放windows服务器端口-----以打开端口8080为例

    [转载]原文地址:https://blog.csdn.net/spt_dream/article/details/75014619 本文记录两个内容: 1.win7下打开端口 2.服务器(2003或者 ...

  10. MySQL 查询出的时间相差几个小时

    最近做的一个springboot2.0项目. 前提是我的服务器时区没有问题: [root@wangbo ~]# date -R Mon, 22 Apr 2019 19:24:33 +0800 可以参考 ...