纯HTML，表格头部和表格左侧固定，右侧能滚动

最新推荐文章于 2024-07-05 20:20:47 发布
最新推荐文章于 2024-07-05 20:20:47 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： 学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cocoManager/article/details/105052725
版权

开局一张图！

 

直接上代码

 <html>

<style type="text/css">
 

	::-webkit-scrollbar{width:0px;background-color:#e1e5ea}
	::-webkit-scrollbar-thumb{background-color:#c3cad4;border-radius:10px;border:2px solid #e1e5ea;}
	::-webkit-scrollbar-thumb:hover{background-color:#aab1bc;}
	::-webkit-scrollbar-thumb:active{border:0;border-radius:0;background-color:#737ed7}
	::-webkit-scrollbar-thumb:window-inactive{background-color:#4c97da}




	 table th,td{
		border: solid 1px gray;
		border-top: none;
		border-right: none;
		width: 100px;
	}

	.container{
		width: 100%;
		border: solid 0px red;
		overflow: hidden;
	}

	.border-top{
		border-top: solid 1px gray;
	}
	 
	.top{
		height: 43px;
	}

	.top th{
		height: 42px;
		text-align: center;
	}
	.top-left{
		width:500px;
		float: left;
		position: relative;
	}

	.top-right{
		width:auto;
		overflow: hidden;
	}

	.bottom{
		max-height: 370px;
		height: 370px;
		overflow-y: auto;
	}
	.left{
		width:500px;
 		float: left;
 		max-height: 350px;
		height: 350px;
		position: relative;
		overflow: hidden;
	}

	.right{
		width:auto;
		max-height: 370px;
		height: 370px;
		overflow-x: auto;
	}

	#tbl-bottom-right tr:last-child{
		border-right: solid 1px gray;
	}

	 
</style> 
<body>

<div class = "container"  >
<div class="top">
	<div class="top-left">
		<table style="width: 100%" class="border-top" cellpadding="0" cellspacing="0">
			<tr class="head">
				<th>1</td>
				<th>2</td>
				<th>3</td>
				<th>4</td>
				<th>5</td>
			</tr>
		</table>
	</div>
	<div class="top-right" id="tbl-top-right">
	<table style="width: 2500px;" class="border-top"  cellpadding="0" cellspacing="0">
			<tr class="head">
				<th>22</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
			</tr>
		</table>
	</div>
</div>
	
<div  class="bottom">
	<div class="left">
		<table style="width: 100%"  cellpadding="0" cellspacing="0">
			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>

			<tr class="head">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
			</tr>
		</table>
	</div>
	<div class="right" id="tbl-bottom-right"   onscroll="document.getElementById('tbl-top-right').scrollLeft = this.scrollLeft;">
	<table style="width: 2500px;" cellpadding="0" cellspacing="0">
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
			<tr class="head">
				<td>22</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				<td>5</td>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
				 
			</tr>
		</table>
	</div>
</div>
</div>

</body>
 </html>

 

调皮的鑫鑫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HTML 教程】表格标签
web前端开发
12-07 621
作者 | 阮一峰表格（table）以行（row）和列（column）的形式展示数据。1、<table>，<caption><table>是一个块级容器...
5.左侧不动,右侧自适应
lazylYYY的博客
10-09 221
一:运用BFC的overflow:hidden <style> .left { width: 100px; height: 100px; background-color: aqua; float: left; } .main { background-color: blue; heigh..
jquery 动态的把table左边列表固定不动，右边可上下滑动。
num001的博客
01-31 7801
function FixTable(TableID, FixColumnNumber, width, height) {     if ($("#" + TableID + "_tableLayout").length != 0) {         $("#" + TableID + "_tableLayout").before($("#" + TableID));         $("
HTML 表格滚动锁定表头，实现固定行列
dongfangxinding的博客
12-11 2651
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义。
html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）
小R.的博客
12-15 1175
  最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。   倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。   以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。   先来看样子，红色边框是我定的外部宽度。   再来上代
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。
jQuery表格顶部右侧固定滚动代码
06-24
2. **设置CSS样式**：使用CSS对各个部分进行定位，通常表头和固定列使用绝对定位，中间可滚动区域使用相对定位，以便在滚动时不影响固定列。 3. **监听滚动事件**：使用jQuery的`.scroll()`方法监听表格的滚动事件...
Angular8 实现table表格表头固定效果
01-21
监听主体table（浅绿色部分）滚动事件，同步上下滚动头部的table （深绿色部分）和 左右滚动左侧固定的table（红色部分中的紫色部分） 代码 1 $(this.tableContent.nativeElement).on('scroll',
FixedTable.rar
07-05
首先，"表格头部固定"是FixedTable的核心特性。在网页滚动时，表格的列标题会保持在可视区域内，这使得用户在浏览长表格时始终能够看到列名，清晰地知道每一行数据对应的具体信息，尤其是在处理多列和大数据量的表格...
Flex高级表格分组与列锁定
03-12
1. Locking机制：Flex Advanced Data Grid支持列锁定功能，这使得用户可以固定左侧或右侧的列，以便在滚动时保持这些关键列可见。 2. LockingGrid：使用LockingGrid类可以创建一个可锁定列的表格。LockingGrid有两...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： 标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四
锁定表头和固定列(Fixed table head and columns)
05-17
然而，当表格内容过多导致需要滚动查看时，表头和左侧列的消失会给用户带来不便，这时就需要实现“锁定表头和固定列”的功能。这个经典案例就是关于如何在网页上创建一个既能滚动又能保持表头和左侧列固定的表格。 ...
html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例
weixin_35758982的博客
06-04 802
本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：html代码：标题一标题二标题三标题标题标题标题标题标题标题标题标题四标题标题标题标题标题标题标题标题标题五标题标题...
html调整表格位置上下左右,利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字...
weixin_36082346的博客
06-04 626
因其他无关代码比较多，只贴关键代码，请谅解。解释：tblGrid是表格的id ，onchange是每个单元格都拥有的方法，当然可以根据实际情况更改flag是标志位，保证按照我想要的顺序新增tabindex$(function() {var baseIndex = 100;var flag=1;$("#tblGrid").find("tr").each(function(r) {if($(this)...
html表格数据滚动标签marquee
有梦想的小程序员的博客
12-22 6003
滚动列表 name sex age phone <!-- marguee总结 direction="up" 滚动方向 up是向上，down是向
html实现文字在表格上方左侧,html实现固定表格四周并且可以上下左右滚动
weixin_28406969的博客
05-31 1652
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法，表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定，本文为大家提供了思路，感兴趣的小伙伴们可以参考一下问题：最近做项目统计的时候碰见一个特定的需求，要求表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定。先上效果图可能会更明了些：左右滚动时，两列固定，头尾中间部分跟着滚动。上下滚动时...
table表格数据无缝循环滚动
Jadeon
09-02 8006
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> <div class="tbl-header"> <table border="0" cellspacing="0" cellpadding="0"> ...
【html】table表格数据无缝循环滚动
德仔
09-27 3953
分享一个好看的表格无缝滚动:(实战用起来很舒服)分享一个好看的表格无缝滚动:(实战用起来很舒服)
HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
最新发布
朝阳39的博客
07-05 475
访问接口，返回文件流进行下载时，也会用到！
antd3 不设置 y 值时， 表格滚动时需要表格头部固定
05-27
如果你使用的是 antd3 版本的表格组件，且没有设置 `y` 值，那么你可以设置 `scroll` 属性来实现表头固定的效果。具体来说，你需要设置 `scroll` 属性的 `x` 值为表格的宽度，`y` 值为表格的高度减去表头的高度，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值