欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

程序员文章站 2024-02-02 19:15:04
需求的表格比较复杂(各种合并新增删除),elementUi的table组件无法满足需求,故而写了原生table,且与其他用了table组件的表格保持一致。 贴一下简单的代码,只实现操作按钮固定右侧以及底部滚动条功能: < ......

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

原生 table css实现操作按钮固定右侧及底部滚动 IE不会卡死

 

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

  

<!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浏览器卡死