表头不动，，的div

最新推荐文章于 2021-02-15 14:54:54 发布
最新推荐文章于 2021-02-15 14:54:54 发布
阅读量104 收藏
点赞数
分类专栏： javascript 文章标签： IE Firefox XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiachenmianyu/article/details/83937443
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>带滚动条的表格 - scroll table</title>
</head>

<style type="text/css">

table {
border-collapse:collapse;
border:0;
width:auto;
table-layout:fixed;
}


.dd {
height:150px; /* set height here for ie */
width:600px;
overflow-y: auto;
}

.dd thead {
display:block;
background-color:red; /* firefox needs a background color */
}
.dd thead tr {
position: relative;
}

</style>

<body>
<div class="dd">
<TABLE border=1>
<thead>
<TR>
<Th>Mapping 公式</th>
<th>计算顺序</th>
<th>LNE-S001</th>
<th>LNE-S002</th>
<th>LNE-S003</th>
<th>LNE-S004</th>
<th>LNE-S005</th>

</TR>
</thead>
<TR>
<TD>LNE-F001</TD>
<td><input type="text" SIZE=8></input></td>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
</TR>
<TR>
<td>LNE-F002</td>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
</TR>
<TR>
<TD>LNE-F003</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
</TR>
<TR>
<TD>LNE-F004</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
</TR>
<TR>
<TD>LNE-F005</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
</TR>
<TR>
<TD>LNE-F006</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
</TR>
</TABLE>
</div>
<label>需要注意表格的头，必须在滚动时保持不动！</label>
</BODY>
</HTML>
jackchenmy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
顶部表头和侧面表头固定的表格div实现
Colossalis_c的博客
08-24 1828
顶部表头和侧面表头固定的表格div实现
bootstrap表头如何展示不动_bootstrap-table实现表头固定以及列固定
weixin_39876002的博客
02-06 298
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和cssquery下载地址：http://www.jq22.com/jquery-in...bootstrap下载地址：http://www.bo...
div悬浮在固定位置_固定表头问题
weixin_39632728的博客
11-25 216
<style> .araf-table-container { height: 318px; // 定义表格背景布的高度 overflow-x: hidden !important; } .table thead { background: #EFEFF4 !important; position: ...
html table表头不变滚动表体
热门推荐
回梦游仙
04-09 2万+
table 需要出现纵向滚动条时，大多数情况会在table外面包一层div 设置css属性  overflow:auto 来实现table出现滚动条但这样做有个问题，滑动表格是移动整体 表头也会被移动。 解决办法有如下 1、 设置两个table 表头一个表体一个
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
11-23
最近在做博客的目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。 在此之前先说一下关于页面元素的坐标获取，这张图的经典性不必再提。  实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动，因为我们要滚动到页面某个标题，所以需要计算出滚动这个元素的具体绝对位置，而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量，此处不适用。 此处应使用浏览器原生提供的 getBoundingClientRect 接口，此函数返回的是元素距离浏览器各边距的绝对位置，跟是什么定位类型的无关，非常适合制作页面滚动效果。 
css列名不动_表头不动，内容滚动的例子(纯css+html)
weixin_39999536的博客
02-01 215
Table.table{width: 100%;border-collapse:collapse;border-spacing:0;}.fixedThead{display: block;width: 100%;}.scrollTbody{display: block;height: 262px;overflow: auto;width: 100%;}.table td,.table th {wi...
CSS控制表头不动，表单内容滚动
weixin_42120621的博客
12-20 3521
在工作中做项目时遇到一个需要固定表头的需求，总结思考如下： 要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。 首先创立一个表格 <!DOCTYPE html> <html> <head> &...
bootstrap表头如何展示不动_bootstrap-table实现表头固定以及列固定的方法示例
weixin_34901243的博客
02-15 924
之前使用bootstrap写了一个报表表格，最近突然找到我，说让我看看能不能将表格的表头和第一列进行固定，这样的话方便查看数据，于是，我开始了苦逼的研究起来，毕竟我是个后端啊，对于前端的样式问题，特别是小功能，烦的一批这里就记录下我的研究成果一：引入js和css这里注意：引入jquery时，不要引入jquery2.0.0(包括2.0.0)版本以下，如果你引入了2.0.0版本以下的jquery的话，...
vue+element-ui动态生成多级表头的方法
12-29
vue+element html配置： <div id=table>{{tableData}} <el-table-column v-if='item.children||item.children
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...
vue+render+jsx实现可编辑动态多级表头table的实例代码
01-19
最近项目需要实现可编辑的动态多级表头表格，看了两天的文章，始终没有找到我想要的效果，在了解了render+jsx的基础用法后，自己基于element-ui封装了一个，数据格式参考element-ui table的数据。实现如下： 1....
Vue动态生成表格的行和列
12-29
当在开发项目的时候，固定的页面表格标题及内容不能满足需求，需要根据不同的需求动态加载不同的表格表头和表格的内容，具体的实现代码如下： <div class=boxShadow> <div xss=removed> ref=multipleTable ...
利用css3 translate完美实现表头固定效果
12-29
前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。 效果如下： 感觉是不是很和谐，而且...
表格数据可滑动，表头固定不动效果
royal1235的博客
01-07 2966
1.效果图如下： 2.jsp代码：注意：table样式用的bootstrap样式 &lt;table class="table table-bordered" &gt; &lt;thead &gt; &lt;tr&gt; &lt;td style="width:19.57%"&gt;月份&lt;/td&gt;
js实现表头不动，表格内容无限循环滚动
qq_42975998的博客
03-06 6246
表头不动，只有内容无限循环滚动，代码如下： html部分： &lt;div class="content"&gt; &lt;div class="header"&gt; &lt;div&gt;组织排名&lt;/div&gt; &lt;div&gt;组织名称&lt;/div&gt; &lt;div&gt;
战略规划之五看三定方法论.pptx
最新发布
06-14
战略规划之五看三定方法论.pptx
cutcamera1718339848103.png
06-14
cutcamera1718339848103.png
html表格，固定表头不动
05-14
在HTML表格中，要固定表头不动，可以使用CSS中的position属性和z-index属性。 首先，在表格之前添加一个div，设置其样式为position:fixed，top:0，left:0，z-index:1，height:表头的高度，width:表格的宽度。这样就...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值