table标题栏固定左右可滚动

最新推荐文章于 2024-05-29 09:30:57 发布
最新推荐文章于 2024-05-29 09:30:57 发布
阅读量641 收藏
点赞数
分类专栏： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aoxue018/article/details/85058951
版权

http://jsrun.net/2iiKp/edit 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
				body {
		  text-align:center;
		  font-family:微软雅黑;
		}

		.fixedTable > thead > tr > th, .fixedTable > tbody > tr > td {
		  width: 3%!important;
		}

		#fixedTab,#grid {
		  width: 1300px;
		  border: 1px solid gray;
		}
		td,th{
		  height:35px;
		  text-align:center;
		}
		
		#contenter {
		  position: relative;
		  width: 800px;
		  height:400px;
		  margin: auto;
		  background-color: white;
		  border: 1px solid black;
		  position:relative;
		}

		#fixedDiv {
		  position: absolute;
		  left: 0;
		  overflow: hidden;
		}

		#fixedTab th {
		  background-color: #4ca9f7;
		  color: white;
		}

		#mainDiv{
		  height:465px;
		  width: 1300px;
		  overflow:auto;
		  overflow-x:hidden;
		}
	</style>
</head>
<body>
	<h2>缺点：右边的滚动条不能固定</h2>
<h3>查看源码：<a href="http://jsrun.net/2iiKp/edit">http://jsrun.net/2iiKp/edit</a></h3>

<div id="contenter" style="overflow-x:auto;height:400px;">
  <div id="fixedDiv">
  <table id="fixedTab" class="fixedTable" border="1" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>爱好</th>
      <th>学历</th>
      <th>特长</th>
      <th>性格</th>
      <th>数学</th>
      <th>语文</th>
      <th>英语</th>
      <th>体育</th>
      <th>美术</th>
      <th>音乐</th>
      <th>早操</th>
      <th>地理</th>
    </tr>
  </thead>
  </table>
</div>
  <div id="mainDiv">
  <table id="grid" style="margin-top:35px;" class="fixedTable" border="1" cellpadding="0" cellspacing="0">
<!--   <thead style="display:none;">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>爱好</th>
      <th>学历</th>
      <th>特长</th>
      <th>性格</th>
      <th>数学</th>
      <th>语文</th>
      <th>英语</th>
      <th>体育</th>
      <th>美术</th>
      <th>音乐</th>
      <th>早操</th>
      <th>地理</th>
    </tr>
  </thead> -->
    <tbody>
      <tr>
        <td>1</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
      <tr>
        <td>sa</td>
        <td>sf</td>
        <td>sg</td>
        <td>dd</td>
        <td>zc</td>
        <td>zc</td>
        <td>vc</td>
        <td>vb</td>
        <td>fg</td>
        <td>cn</td>
        <td>sf</td>
        <td>zx</td>
        <td>cb</td>
        <td>ub</td>
      </tr>
    </tbody>
  </table>
</div>
</div>
</body>
</html>

 

aoxue018
关注
专栏目录
Table固定指定列进行横向滚动(可拓展)
05-29
根据不同需求固定指定列进行横向滚动操作 提供有Index.html，Index.js文件 Index.js可进行拓展(固定指定行进行垂直滚动操作)
js改变css样式的三种方法
weixin_33860722的博客
03-07 282
共用代码： <div id="div">这是一个盒子</div> var div = document.getElementById("div"); 第一种:用cssText div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;li...
层（div或table）的左右滚动
weixin_34234823的博客
03-23 215
 &lt;script language="javascript"&gt;function MM_setIMG(w,h,d) {  if (w==null) {w=0}  if (h==null) {h=0}  if (w&lt;=h){ if (h&gt;=114 || h==0) {d.height=114}}else{ if (w&gt;=114 || w==0) {d.width=114}...
微信小程序 table表格 固定表头和首列 右侧表格可以左右滚动（多种表格演练）
热门推荐
m0_61073617的博客
05-03 1万+
最近在做公司的项目需要到表格展示数据，但是微信小程序是没有原生table标签的，于是就百度各种搜...发现结构有类似的就粘过来修改，要善于学习和借鉴别人的经验使其变成为自己的东西，学无止境~在这里做下记录！...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <div class=table_box_big> <div class=table_box> <table> <th><div>标题一</div></th> <th><div>...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip
11-18
这个主题正是“jQuery实现固定表头标题栏让表格数据在滚动栏里滚动”的核心所在。 jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在本案例中，我们将利用...
网页模板——jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip
11-23
"jQuery实现固定表头标题栏让表格数据在滚动栏里滚动"这一技术主题，就是解决这个问题的一种常见方法。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在这里...
Html中Table表头固定内容滚动以及checkbox右对齐
03-16
制作的样式中要求table表头固定，内容滚动，同时checkbox右对齐，支持全选
左右上下滑动，类似股票，table
05-11
类似于股票的上下左右滑动，联动，table滑动
固定表头,上下滚动固定,左右滚动自动对齐
10-17
html表格,固定表头，上下滚动时固定，左右滚动时自动对齐，缩放浏览器时，功能一样完美执行 ! 本人亲手写,亲自测试,功能完美,代码简单易懂! 对需要该功能特效的html表格的亲来说,有很大的帮助哦! 产权所有人:ぶん。
table持续滚动
qq_38026437的博客
01-09 1438
做了个简单的table滚动demo 思路：早table外部加一个div标签 设置固定高度，这个高度是table tr的高度的倍数就可以了， 然后溢出隐藏，在用js设置scrollTop 就可以实现滚动特效，如果超出就变为0. 因为是用scrollTop，变成0的时候难免会有点卡顿。   代码：   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;he...
原生html+css 实现table表格超出宽度后，table的第一列和第二列固定左侧，其余列左右滚动
Sunny_lxm的博客
04-10 511
原生html+css 实现table表格超出宽度后，table的第一列和第二列固定左侧，其余列左右滚动
el-table表格实现鼠标拖动而左右滑动
最新发布
sinat_33255495的博客
05-29 872
表格样式较为复杂，10条数据超出整个屏幕的高度，因而导致无法快速拖动滚动条，所以提出需要在表格内容区拖动鼠标，从而实现无需滚动到底部就可以左右拖动表格内容的效果。实现的方式通过注册一个自定义指令，方便随时调用这个鼠标拖动的能力。
手机端，使用fixed定位，依然会随着屏幕滚动而滚动
ZhuCongLin_68的博客
06-07 1327
fixed定位问题
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
徊忆羽菲
04-28 1732
学习使用html中table实现内容滚动下拉表头和左右滑动前四列固定不动的方法代码整理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值