css在原生table实现antd 里Table的固定列

最新推荐文章于 2024-01-15 17:59:31 发布
最新推荐文章于 2024-01-15 17:59:31 发布
阅读量1k 收藏 1
点赞数
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41020757/article/details/119807639
版权

1.定义表格列，给要固定的列加样式position:sticky

 2.渲染表头

3.给表格的tbody里的要固定的操作列加上position：sticky,还有right，top,zIndex

 注意：给要固定的列加position:sticky,设置right,top,等位置，要固定的列给z-index:2,其余不要固定的列加上z-index:1,即可实现固定列

 

瞌睡虫～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd 设置表头属性_React表格固定表头/锁定列
weixin_39753211的博客
01-26 2370
Ant Design的Table组件挺好用，固定表头及锁定列的功能不在话下，但Ant Design Mobile没有Table组件。移动端要实现表格固定表头及锁定列的功能应该可以使用rc-table，当然也可以自己写一个。通过分析AntD的Table，可以看出固定表头的表格是由上下两个标签组成的，它们分别嵌套在div内，上面的是表头，只包含，下边是表格内容，只包含。应该是通过监听下面div的ons...
antd Table组件——固定列宽度遇到的问题
weixin_57208584的博客
08-31 7421
antd table组件小问题记录
antd 表格 某一行固定 ，表格随可见屏幕改变表格高度
weixin_45540782的博客
07-15 881
表格随可见屏幕改变表格高度 HTML 获取屏幕、浏览器、页面的高度宽度 antd 表格 最后一行固定 使用 position:sticky 实现粘性布局
解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用以及控制只展开一行的问题
热门推荐
bellah521
03-03 1万+
解决Ant Design Vue table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用以及控制只展开一行的问题 开发项目中时使用 antdv 发现 table组件固定某列(fixed)和展开某行(expandedRowRender)不能同时使用。样式上不兼容。经大神指点，找到了办法，在此记录一下。 遇到的问题如下图： 问题描述：点击左侧的加号（+）展开一行时，固定在右侧的操作列样式不能适应整个整个table的高度。 解决方法：在展开行以后对单独固定列的td单
table 固定特定行
weixin_45974445的博客
07-23 967
在element或者antDesignVue的开发的过程中我们会遇到需要固定特定table行的情况。在这里通过css样式对第一行数据进行固定（非表头）父元素的首个元素选择器。
antd-table-react.zip
07-13
这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向滚动的表格来说尤其有用。下面我们将深入探讨 antd-table 的核心特性、...
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。 首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() ...
解决iview table组件里的 固定列 表格不自适应的问题
01-18
当在使用iview Table组件里固定列功能时 出现表格不自适应宽度问题 具体如下 解决这个bug 很简单 把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', ...
Table固定指定列进行横向滚动(可拓展)
05-29
根据不同需求固定指定列进行横向滚动操作 提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font-family:微软雅黑, Open Sans, 宋体; font-weight: bold; } 代码： <div style={{textAlign: 'center',backgroundColor:'#17
【css】修改antd table row的样式
坚强的泡沫的博客
11-02 358
[css]修改antd table row的样式
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 6785
前言： antd表格设置了fixed属性后，在设置scroll:x的时候会出现空白间隙。 如下图： 解决方案： 1.动态计算宽度 //动态计算columns width属性（width属性不要加单位px） countX = (arr) => { return arr.reduce((cur, next) => { return cur + (next.width ? next.width : 0) }) } let columns=[{.
ant design table表格前两列固定且宽度固定，其他列有固定宽并可以滚动
最新发布
sccscswwe的博客
01-15 1170
1.有一个大概40列*80行的table列表，除了在小屏幕上希望可以滚动显示，并且在打屏幕上需要全屏，不可滚动、不可分页的显示所有数据。在列少时：比如除前两个列之外还有两列，这两列的内容没有撑满表格，而强两列的固定列重复显示两次如下图所示。3.其他列如果列少时需要适应屏幕宽度显示，列多时需要有最大宽度并有滚动效果。emmm，写的比较简便，如果通过这个代码不太明白的地方可以私信交流。可能上面说的太笼统，下面我就给出一个稍微全的代码。2.前两列固定在左侧，且宽度固定。原因是我在后面的列的设置中加入了。
css样式大全
风华正茂的博客
08-27 504
1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：   ……    ……  　2.内部样式表 　　内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法：  
bootstrap-table按某一列搜寻，以及固定某一列详解
hggl_bera的博客
06-10 5578
先说以某一列的形式模糊查询 先将search:true,但这仅仅是针对全局的模糊查询，要想针对某一列模糊查询需要加一个函数（如下所示） customSearch:function customSearch(text) { //搜索--以第一列为导向 text为搜索框内输入的值 if(text == undefined){ return false; } ...
蚂蚁金服-antd-Table（2）
tianxia1202的博客
01-07 1171
import React,{ Component} from 'react'; import { Table, Icon, Divider } from 'antd'; const { Column,ColumnGroup } = Table; const dataSource = [{ key: 1, firstName: '小小', lastName: '天下',
如何实现表格固定表头和某列
bug处理进行时
10-31 3606
通过js实现固定表格的表头和某列 在开发过程中，如果数据比较多并且需要对比查看的情况下，一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的需求。这时候就需要自己动手写一个这样的效果。 需求 表格是页面的主体部分，表格的数据量比较大，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第一列，第二列固定。前两列在固定在页面上的前提...
antd table 固定列自定义样式
06-06
如果你想要对固定列进行自定义样式，可以使用 `columns` 属性中 `fixed` 属性来指定哪些列是固定列，并在 `columns` 中对这些列的 `render` 方法中返回需要自定义样式的元素。 例如，假设你想对第一列进行自定义样式，可以这样写： ```jsx import { Table } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', fixed: 'left', // 指定该列为固定列 render: (text, record) => ( <span style={{ fontWeight: 'bold' }}>{text}</span> // 对该列返回需要自定义样式的元素 ), }, { title: 'Age', dataIndex: 'age', key: 'age', }, // 其它列... ]; const data = [ { key: '1', name: 'John Brown', age: 32, }, // 其它行... ]; const App = () => { return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />; }; ``` 在上面的代码中，我们在 `columns` 中指定了第一列为固定列，并且在该列的 `render` 方法中返回了一个带有自定义样式的 `span` 元素。注意，我们还需要在 `Table` 组件中指定 `scroll` 属性，来使固定列生效。 你可以根据自己的需求，对固定列进行不同的自定义样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值