表格左侧列少固定，右侧列多下方出现滚动条实现代码

最新推荐文章于 2021-12-15 11:45:37 发布
最新推荐文章于 2021-12-15 11:45:37 发布
阅读量231 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/penghuaiyi2008/article/details/84054246
此博客展示了员工信息表格与日历数据的整合展示方式，包括员工编号、姓名及日期对应的数据列。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<title></title>
</head>
<body>
   <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#9AC0CD">
   <tr><td>
	<!--newface  Frame page E2-->
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td width="20%" valign="top">
		<table width="100%"  border="0" cellspacing="0" cellpadding="0">
		<tr>
		 <td align="center"  nowrap height="26"><b>员工编号</b></td>
		 <td align="center"  nowrap height="26"><b>姓名</b></td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		<tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>

		</table>
	</td>
	<td width="80%" valign="top">
		<DIV style="z-index:1000; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute;height=300;">
		<table width="100%"  border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
			<td  height="26" align="center" nowrap><b>2011-10-01[六]</b></td>
		<tr>
        <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>
		 <tr>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
			<td height="21" nowrap>aaaaaa</td>
		</tr>

		</table>
		</div>
	</td>
	</tr>
	</table>
  <!--newface  Frame body E2-->
</tr></td></table>
</body>
</html>

 

Vue3 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
资深程序员
07-14 3221
vue3，iview，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue3iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动条无法拖拽的问题，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iviewtable组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题
jquery插件table表格头部和左侧固定
09-29
大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，所以能够很好的支持各种浏览器上的报表展示！
Table固定指定列进行横向滚动(可拓展)
05-29
根据不同需求固定指定列进行横向滚动操作 提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)
纯HTML，表格头部和表格左侧固定，右侧能滚动
仅此一❤
03-23 2108
开局一张图！ 直接上代码 <html> <style type="text/css"> ::-webkit-scrollbar{width:0px;background-color:#e1e5ea} ::-webkit-scrollbar-thumb{background-color:#c3cad4;border-radius:10px;bor...
html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）
小R.的博客
12-15 1300
  最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。   倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。   以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。   先来看样子，红色边框是我定的外部宽度。   再来上代
jquery 动态的把table左边列表固定不动，右边可上下滑动。
num001的博客
01-31 7944
function FixTable(TableID, FixColumnNumber, width, height) {     if ($("#" + TableID + "_tableLayout").length != 0) {         $("#" + TableID + "_tableLayout").before($("#" + TableID));         $("
table 固定列头方法（CSS）
baiyueye0977的博客
06-23 329
table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; ...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
11-20
这是因为当表格的宽度达到临界值，固定列的高度没有自动适应，导致出现垂直滚动条，固定列的高度小于实际需要的高度。 要解决这个问题，关键在于正确设置固定列的高度。在检查元素工具中，我们可以发现固定列的DOM...
EXCEL 如何让表格的首行或首列固定不动不滚动-.docx
09-26
3. 验证冻结列是否生效的方法很简单：使用页面上的水平滚动条，你应该会发现首列始终固定在屏幕的左侧，无论你如何滚动查看右侧的数据列。 熟练掌握冻结窗格的功能对于提高在Excel中的操作体验和工作效率非常重要。...
el-table 同时设置固定表头和合计下方纵向滚动条被遮挡
最新发布
03-26
若存在固定列（如左侧/右侧固定列），调整其 `bottom` 值以避免覆盖滚动条[^4]： ```css /* 调整固定列下方留出滚动条空间 */ .el-table__fixed, .el-table__fixed-right { height: auto !important; bottom: 16px...
html怎么固定左侧一列,具有水平滚动功能的HTML表（固定的第一列）
weixin_39659748的博客
06-03 445
largeQ怎么样：table { table-layout: fixed; width: 100%; *margin-left: -100px; /*ie7*/}td, th { vertical-align: top; border-top: 1px solid #ccc; padding: 10px; width: 100px;}.fix { position: absol...
Bootstrap Table Fixed Columns 固定列
04-02
bootstrap 固定列需要引用的js和css，同时里面含有一个简单的例子
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
左右固定table表格源码分享
chunrou3281的博客
12-13 191
左右固定table表格源码分享： <body> <div id="table_div" class="table_div"> <table id="table" class="table" cellspacing="0" cellpadding...
【HTML 教程】表格标签
web前端开发
12-07 833
作者 | 阮一峰表格（table）以行（row）和列（column）的形式展示数据。1、<table>，<caption><table>是一个块级容器...
jqgrid表格最右侧空出一截问题
lzm150的博客
06-25 1969
当列数为两列以下的时候正常，超过两列就开始有一截留白，节点看就是标题栏宽度少了20个像素，但是一直没找到问题所在。只要随意伸缩以下浏览器宽度就恢复正常。花了一个下午都没搞明白。 暂时使用初始宽度给0，然后延迟重渲染一遍的方式，消除了这个空白。 setTimeout(function () { $('.contentView').css('width','100%'); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值