表格固定表头和列

最新推荐文章于 2024-04-01 18:32:05 发布
最新推荐文章于 2024-04-01 18:32:05 发布
阅读量108 收藏
点赞数
分类专栏： html 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wliverpool/article/details/83525771
版权

在网上找到的一段固定表格中表头和列的代码

<html>   
 <head>   
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
     <title>固定表头和列</title>   
     <style>   
         .FixedTitleRow   
         {   
             position: relative;   
             top: expression(this.offsetParent.scrollTop);   
             z-index: 10;   
             background-color: E6ECF0;   
         }   
           
         .FixedTitleColumn   
         {   
             position: relative;   
             left: expression(this.parentElement.offsetParent.scrollLeft);   
         }   
           
         .FixedDataColumn   
         {   
             position: relative;   
             left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);   
             background-color: E6ECF0;   
         }   
     </style>   
 </head>   
 <body>   
    <div id="scrollDiv" style="width: 400px; overflow: auto; cursor: default; display: inline;   
         position: absolute; height: 200px;">   
         <table id='accountTable' width='550' height='230' cellpadding='0' cellspacing='0' border='1'   
             style='table-layout: auto' bordercolor='lightgrey'>   
             <tbody>   
                 <tr class="FixedTitleRow">   
                     <td class="FixedTitleColumn">   
                         ID0</td>   
                     <td class="FixedTitleColumn">   
                         CK0</td>   
                     <td class="FixedTitleColumn">   
                         Code0</td>   
                     <td class="FixedTitleColumn">   
                         Descirption0</td>   
                     <td class="FixedTitleColumn">   
                         TOL0</td>   
                     <td>   
                         XS0</td>   
                     <td >   
                         SS0</td>   
                     <td>   
                         MS0</td>   
                     <td>   
                         DS0</td>   
                     <td>   
                         BS0</td>   
                     <td>   
                         XL0</td>   
                     <td>   
                         ML0</td>   
                     <td>   
                         DL0</td>   
                     <td>   
                         EM0</td>   
                     <td>   
                         BM0</td>   
                 </tr>   
                 <tr>   
                     <td class="FixedDataColumn">   
                         88</td>   
                     <td class="FixedDataColumn">   
                         88</td>   
                     <td class="FixedDataColumn">   
                         88</td>   
                     <td class="FixedDataColumn">   
                         88</td>   
                     <td class="FixedDataColumn">   
                         88</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                     <td>   
                         22</td>   
                 </tr>   
                 <tr>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         1111</td>   
                     <td class="FixedDataColumn">   
                         This is Test</td>   
                     <td class="FixedDataColumn">   
                         1</td>   
                     <td>   
                         001</td>   
                     <td>   
                         002</td>   
                     <td>   
                         003</td>   
                     <td>   
                         004</td>   
                     <td>   
                         005</td>   
                     <td>   
                         006</td>   
                     <td>   
                         007</td>   
                     <td>   
                         008</td>   
                     <td>   
                         009</td>   
                     <td>   
                         010</td>   
                 </tr>   
                 <tr>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         1111</td>   
                     <td class="FixedDataColumn">   
                         This is Test</td>   
                     <td class="FixedDataColumn">   
                         1</td>   
                     <td>   
                         001</td>   
                     <td>   
                         002</td>   
                     <td>   
                         003</td>   
                     <td>   
                         004</td>   
                     <td>   
                         005</td>   
                     <td>   
                         006</td>   
                     <td>   
                         007</td>   
                     <td>   
                         008</td>   
                     <td>   
                         009</td>   
                     <td>   
                         010</td>   
                 </tr>   
                 <tr>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         1111</td>   
                     <td class="FixedDataColumn">   
                         This is Test</td>   
                     <td class="FixedDataColumn">   
                         1</td>   
                     <td>   
                         001</td>   
                     <td>   
                         002</td>   
                     <td>   
                         003</td>   
                     <td>   
                         004</td>   
                     <td>   
                         005</td>   
                     <td>   
                         006</td>   
                     <td>   
                         007</td>   
                     <td>   
                         008</td>   
                     <td>   
                         009</td>   
                     <td>   
                         010</td>   
                 </tr>   
                 <tr>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         111</td>   
                     <td class="FixedDataColumn">   
                         1111</td>   
                     <td class="FixedDataColumn">   
                         This is Test</td>   
                     <td class="FixedDataColumn">   
                         1</td>   
                     <td>   
                         001</td>   
                     <td>   
                         002</td>   
                     <td>   
                         003</td>   
                     <td>   
                         004</td>   
                     <td>   
                         005</td>   
                     <td>   
                         006</td>   
                     <td>   
                         007</td>   
                     <td>   
                         008</td>   
                     <td>   
                         009</td>   
                     <td>   
                         010</td>   
                 </tr>   
             </tbody>   
         </table>   
     </div>   
   
 </body>   
 </html>
 
wliverpool
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue表格实现固定表头首列
11-02
在Vue移动端项目中，开发人员经常遇到需要创建具备固定表头和首列的表格，以提供良好的用户体验。本文将详细讲解如何在不依赖任何UI框架或插件的情况下，利用Vue的核心特性实现这样一个功能。 首先，我们需要理解...
element-ui 设置table表头固定
世界太浮夸
02-23 3908
element-ui
实现固定表头的三种方法
SanOrintea的博客
04-18 2848
实现原理：原生方法-具有 sticky 属性的元素，会固定在离它最近的一个拥有 滚动机制 的祖先元素上，达到固定表头的效果。监听页面滚动事件，计算table的位移，使用translate3d反向设置表头的y轴位移值，达到固定表头的效果。实现原理：表头一个表格，表体一个表格，移动时候，移动的是表体，达到固定表头的效果。第一种：html中的table标签原生方法。第二种：element-ui采用的多表格。第三种：Ange-ui采用的。
element-ui el-table 固定表头
XueZePeng18729875380的博客
01-26 2066
1. 官网给出两种种属性来固定表头 height 以及 max-height；但是有个问题就是 height高度会被定死，max-height无法适应不同分辨率的情况。2. 可以进行样式控制表格高度，达到固定表头的需求，就可以避免高度定死的情况。
element-ui 表格el-table高度不是一个固定值时固定表头
lingliu0824的博客
01-05 5585
当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。**1.使用一个单独的标签包裹el-table组件，父级组件使用flex纵向布局,父级的高度需要确定（通过固定px或者百分比或者其父级也是纵向flex布局，其设置flex:1来确定高度）/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。
element table头部固定，内容滚动
最新发布
weixin_49511142的博客
04-01 1186
思路：首先我们要给table表格套一层父元素，然后获取这个父元素的高度，同时获取表格的表头的高度以及分页的高度。然后用父元素的高度减去表头和分页的高度即是table表格的高度，然后再把这个高度赋值给。2.然后我又想会不会是数据过多，我先获取了dom，然后数据渲染后的dom我们高度不一致，里面进行监听，等数据回来后再获取dom，这样总可以了吧，但是事实总是残酷的，又失败了。3. 最后大家别忘了销毁监听器。
Android可固定表头和第一列自定义表格
04-03
Android可固定表头和第一列自定义表格，集成简单。 API使用说明： LockTableView mLockTableView=new LockTableView(this,mContentView,mTableDatas); mLockTableView.setLockFristColumn(true) //是否锁定第一列 ...
html table 固定表头和列
09-21
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
h5 固定表头及列头demo
12-01
总的来说，"h5 固定表头及列头demo"是一个实用的示例，它结合了H5、CSS和JavaScript的技术，以实现对长表格的优化显示。通过学习和理解这个示例，开发者能够提升在网页开发中的用户体验设计能力，特别是在处理数据...
基于jquery的固定表头和列头的代码
10-28
2. 使用`clone(true)`方法创建原始表格的深拷贝，分别用于表头、固定列和数据部分。 3. 将这些拷贝分别插入到对应的辅助容器中，并调整它们的CSS属性，如高度、宽度和位置，以实现固定效果。 4. 通过设置`thead`的...
Element技能点--el-table固定表头且高度占满
程序员大阳
01-18 2万+
el-table固定表头非常简单，只要给添加height属性即可。 <el-table height="250"></el-table> 如果想让表格占满当前高度，必要前提时让父元素的高度先撑满当前高度。 <div style="height:100%"> <el-table height="100%"></el-table> </div> 而有些情况下，设置height为100%只能保证固定表头，高度无法占满，此时可以尝试使用。
如何实现elementui中固定表头的表格滚动到底部后加载更多
weixin_35755188的博客
01-12 1649
要实现在 element-ui 中固定表头并滚动到底部加载更多数据，需要使用 el-table 组件中的 "body-style" 属性和 "scroll" 属性。 使用 "body-style" 属性设置表格内容的高度和 overflow 属性。例如： <el-table :data="tableData" body-style="height: 200px;overflow-y: au...
element 表格多级表头子列固定
weixin_42421494的博客
06-30 2244
element 多级表头设置部分子列固定
element-ui的表格组件el-table固定表头后，怎么实现表格高度的自适应呢？
guixin12345的博客
08-28 5463
element-ui的表格组件el-table固定表头，并且表格高度自适应。
element table 表头固定,表格高度自适应
weixin_42342065的博客
12-15 724
element table 表头固定,表格高度自适应
elementui固定表格头部
口袋的天空的博客
02-18 6806
elementui固定表格头部 el-table的高度超出页面，头部固定，下面滚动，设置height=“calc(‘100% - 48px’)” <template> <div class="box"> <div class="searchBox"> </div> <div class="gap"></div> <div class="tableBox"> <el-ta
element更改表格表头、行、指定单元格样式
SunnyLjs的博客
07-07 1万+
element更改表格表头、行、指定单元格样式更改表格的样式使用header-cell-style属性，可为函数或对象1. 函数写法&lt;!-- html --&gt; &lt;el-table :header-cell-style="rowClass"&gt;&lt;/el-table&gt;12//在method里面写上方法 rowClass({ row, rowIndex}) { ...
vue、element实现表格表头纵向显示
热门推荐
vividzll的博客
07-28 4万+
大多数情况，我们的管理端都有表格展示数据，然而表格的展示基本都是表头横向展示，然后相应的数据一行一行排列在下方，我们先看一下element官网的el-table的样子： 那么我们如果想要让表头纵向展示该如何实现呢？怎么样？是不是发现element官网没有这样的示例，有点难搞，哈哈，接下来咱们就来现场撸纵向表格展示，准备好了吗？ 其实原理很简单，一般的都是横向展示，先定义第一行表头，然...
表格vue+elementui 动态固定el-table头部
weixin_44668908的博客
03-19 7468
1.静态固定 el-table 里加 max-height="633” 或者height="633” <el-table ref="multipleTable" max-height="633” :data="tableData" stripe tooltip-effect="dark" style="width: 100%;" > </el-table&gt...
js 固定表头和列
05-24
因此，建议使用 JavaScript 来实现固定表头和列的效果。以下是一种实现方式： 1. 获取表格元素和表头元素 ```javascript var table = document.getElementById("myTable"); var header = table....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值