css3 实现 antd table固定头和列

最新推荐文章于 2023-12-14 15:21:17 发布
最新推荐文章于 2023-12-14 15:21:17 发布
阅读量1.6k 收藏
点赞数
分类专栏： CSS进阶
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/101474377
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.table-head {
				position: sticky;
				top: 0;
				z-index: 1;
			}


			.table-body {}

			.table-header {
				background-color: #3498DB;

			}

			.td-content {
				line-height: 50px;
				width: 100px;
				text-align: center;
			}

			.left,
			.right {
				position: absolute;
				color: red;
				background: #008CF4;
			}

			.left {
				left: 0;
				position: sticky ;
			}

			.right {
				right: 0;
				position: sticky ;
			}

			.container {
				position: relative;
				width: 500px;
				overflow: auto scroll;
				height: 300px;
			}
			table{
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="table-head">
				<table class="table-header" cellspacing="0">
					<tr>
						<th class="left">
							<div class="td-content ">attr</div>
						</th>

						<th>
							<div class="td-content">attr</div>
						</th>
						<th>
							<div class="td-content">attr</div>
						</th>
						<th>
							<div class="td-content">attr</div>
						</th>
						<th>
							<div class="td-content">attr</div>
						</th>
						<th>
							<div class="td-content">attr</div>
						</th>
						<th class="right">
							<div class="td-content ">attr</div>
						</th>
					</tr>
				</table>
			</div>
			<div class="table-body">
				<table class="table-tbody" cellspacing="0">
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
					<tr>
						<td class="left">
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td>
							<div class="td-content">1</div>
						</td>
						<td class="right">
							<div class="td-content">1</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

Fade Away
关注
专栏目录
antd 设置表头属性_React表格固定表头/锁定列
weixin_39753211的博客
01-26 2472
Ant Design的Table组件挺好用，固定表头及锁定列的功能不在话下，但Ant Design Mobile没有Table组件。移动端要实现表格固定表头及锁定列的功能应该可以使用rc-table，当然也可以自己写一个。通过分析AntD的Table，可以看出固定表头的表格是由上下两个标签组成的，它们分别嵌套在div内，上面的是表头，只包含，下边是表格内容，只包含。应该是通过监听下面div的ons...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
weixin_42332910的博客
01-16 2065
1、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在，反正3.16.2版本是存在这个问题的，若是是3.24.0以前的版本估计只能经过修改css样式解决。css按照官网说的：react一、若列头与内容不对齐或出现列重复，请指定固定列的宽度width。若是指定width不生效，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。git二、建议指定...
antd Table 实现 表格行固定
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-26 8122
antd Table 实现 表格行固定
关于position:sticky失效的原因分析
weixin_45394002的博客
07-31 4360
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效： 父元素不能overflow:hidden或者overflow:auto属性 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 父元素的高度不能低于sticky元素的高度 很明显，这里父元素和子元素高度相同，所以不会用到relative定位，直接用f
bootstrap-table、antd-table组件(react)实现首行、首列固定的表格
ClassicSong的博客
07-13 2615
table固定首行首列，使用bootstrap-table-jquery、antd-table-react两种框架满足需求。
table 固定表头
weixin_51666715的博客
03-16 1551
可以直接通过给组件一个最大高度然后通过穿透获取thead使用·position:sticky·固定头部即可。
react-sticky-table:响应式表和动态大小固定的表头和列
04-28
响应式表和动态大小固定的表头，页脚和列。 搜索示例链接-请使用react-sticky-table在对您的应用程序进行评论 特征 0个依赖项，不需要CSS导入，不需要js，高性能。 0、1或任意多个粘性页眉，左列，右列，页脚。 ...
ant-desing-vue table 可伸缩列在固定列、多级表头情况下的实现以及问题解决
子非渔
05-26 4943
这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列， 比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。 1.首先蒋官方的例子copy下来，居然拖不动。 对照了一下官方，css居然都不一样，于是增加了第一个改动 因为style内联样式自带了 translate属性，所以直接去掉right：0；只留left -5.height设置100%就可以。 ...
antd-table-react.zip
07-13
在这里，你可以看到如何定义 columns，以及如何设置 `fixed` 属性来固定首列和首行。 - `index.css`：可能包含了一些样式调整，以适应固定效果和界面美观。 通过这个示例，你可以了解到如何结合 antd-table 的 API ...
css 查看更多_CSS粘性定位固定表格thead部分元素小方法
weixin_39793319的博客
11-21 320
我们都知道CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。任务一种布局都可以通过N多种方式将其设定，今天看看通过属性值sticky来固定表格头部内容。CSS粘性定位固定表格thead部分元素小方法​www.deathghost.cn表格内容溢出容器的情况下，用户在阅读内容时就无法定位内容归属列，不得不滚动...
CSS网页布局入门教程3：一列固定宽度居中
10-30
CSS网页布局入门教程3：一列固定宽度居中
React实现div随页面滚动而固定在浏览器顶部
不积跬步，无以至千里；不积小流，无以成江海。
06-01 2958
代码 export default class FixedHeader extends React.Component { constructor(props) { super(props); this.state = { needFixed: false }; } componentDidMount() { window.addEventListener('scroll', this.handleScroll); } handleScroll = event
设置antdesign-vue表格滚动条在最上方（吸顶）
qq_41792374的博客
08-29 3509
document.querySelector('.ant-table-body').scrollTop = 0
tabel thead 滑动固定顶部
她的猿的博客
05-10 2140
试了几种方法，还是 translateY 比较靠谱 放弃 ie // 固定头部 var thead_top = $('thead').offset().top; $(window).scroll(function() { var sctop = $(this).scrollTop(); if(sctop &gt; 60){ var ty = sctop - thead_top...
antd Table组件应用sticky属性出现两个横向滚动条和横向滚动条点击后消失问题
最新发布
HihiHihaddfsadg的博客
12-14 2594
antd 的Table组件加上sticky之后有个很恶心的bug, 就是横向滚动条有两条，并且点击一下滚动条，有一条滚动条会消失，并且上下滑动横向滚动条不贴底了。
#Table纵向滚动时表头固定 [ position:sticky ]
m0_64332792的博客
01-28 2213
问题：使用antd <Table>组件自带的scroll属性会出现白色空隙，column添加width属性后也无法消除，并且table tbody内不能使用自定义的滚动轴。 解决方法：使用cssposition：sticky 粘性定位 特性： 该属性相当于position:relative 与 position:fixed来回切换。当滚动超出目标区域后，将会切换到fixed状态，固定在目标区域的指定位置 不会脱离文档流，保留原本位置 需与top / bottom / left / r.
组件库的 Table 组件表头表体是如何实现同步滚动？
Cyj1414589221的博客
07-04 780
在使用 Vue 3 组件库 Naive UI 的数据表格组件 DataTable 的固定头部和列示例中，在键盘操作下表格横向滚动有问题，记录一下解决思路！
antd表格固定列出现空白间隙问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-02 7109
前言： 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=[{.
Antd Design Mobile tab去除下方蓝色边框和对tab里面的sticky布局的影响
zkx529的博客
03-28 727
可以看到钻尖人才下有一个深蓝色实心边框和下方的一个蓝色空心边框而下方 简历进度 下方的表格的表头使用粘性布局，粘性布局失效手机端坑还是比较多的，问题排查起来比较麻烦，最近也遇到了一些适配问题难以解决，撰写此文旨在帮助其他和我一样的前端新人，知道 transform: translate3d 属性 为什么会让粘性布局（sticky）失效的也欢迎评论，欢迎大家对文章指正，积极沟通交流。
Antd Table组件表头不对齐的问题
07-08
您好！对于Antd Table组件表头不对齐的...Antd Table组件提供了固定表头的功能，可以通过设置`scroll`属性来实现。这样可以确保表头和表格内容对齐。 希望以上方法能够解决您的问题！如果还有其他疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值