table实现表头不动，而数据滚动操作

最新推荐文章于 2023-05-11 14:47:05 发布
最新推荐文章于 2023-05-11 14:47:05 发布
阅读量1.2w 收藏 1
点赞数
分类专栏： html/js 文章标签： table class input border html generator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w375179337/article/details/5291072
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <style type="text/css">
<!--
body,table, td, a {font:9pt;}
/*重点：固定行头样式*/
.scrollRowThead{position: relative;
left: expression(this.parentElement.parentElement
.parentElement.parentElement.scrollLeft);
z-index:0;}
/*重点：固定表头样式*/
.scrollColThead {position: relative;
top: expression(this.parentElement.parentElement
.parentElement.scrollTop);
z-index:2;}
/*行列交叉的地方*/
.scrollCR { z-index:3;}
/*div外框*/
.scrollDiv {height:200px;clear: both;
border: 1px solid #EEEEEE;
OVERFLOW: scroll;width: 320px; }
/*行头居中*/
.scrollColThead td,.scrollColThead th
{ text-align: center ;}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th
{background-color:EEEEEE;}
/*表格的线*/
.scrolltable{
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC; }
/*单元格的线等*/
.scrolltable td,.scrollTable th{
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 5px; }
-->
</style>

 <BODY>
  <h1>利用CSS代码让Table产生固定表头</h1>
<h3>www.865171.cn</h3>

<div id="scrollDiv" class="scrollDiv" >
<table border="0" cellpadding="3" cellspacing="0" width="300" class="scrollTable">
<tr class="scrollColThead"  >
  <th class="scrollRowThead scrollCR"  >&nbsp;</th>
  <th colspan="2">列头</th>
  <th colspan="2">列头</th>
  <th colspan="2">列头</th>
 
</tr>
<tr class="scrollColThead"  >
  <th class="scrollRowThead scrollCR"  >h1</th>
  <th >h2</th>
  <th >h3</th>
  <th >h4</th>
  <th >h5</th>
  <th >h6</th>
  <th >h7</th>
</tr>
<tr>
  <td class="scrollRowThead"  >
 <input type="checkbox" name="checkbox" value="checkbox">
 a</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
 <input type="checkbox" name="checkbox2" value="checkbox">
 b</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
<tr>
  <td nowrap class="scrollRowThead"  >
 <input type="checkbox" name="checkbox3" value="checkbox">
 c</td>
  <td nowrap>单元格2</td>
  <td nowrap>单元格3</td>
  <td nowrap>单元格4</td>
  <td nowrap>单元格5</td>
  <td nowrap>单元格6</td>
  <td nowrap>单元格7</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
 <input type="checkbox" name="checkbox4" value="checkbox">
 d</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
 <input type="checkbox" name="checkbox5" value="checkbox">
 e</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
<tr>
  <td class="scrollRowThead"  >
 <input type="checkbox" name="checkbox6" value="checkbox">
 f</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
<tr>
  <td class="scrollRowThead" >
 <input type="checkbox" name="checkbox7" value="checkbox">
 g</td>
  <td>单元格2</td>
  <td>单元格3</td>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
  <td>单元格7</td>
</tr>
</table>
</div>
 </BODY>
</HTML>

 

 

 

 

 
<!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;
}
 

.scrolltable {
height:150px; /* set height here for ie */
width:600px;
overflow-y: auto;
}
.scrolltable tbody {
    height:150x; /* set height here for non-ie */
    *height:auto; /* for ie */
display: block;
overflow: auto;
}
.scrolltable thead {  
display:block;
background-color:#6C9786; /* firefox needs a background color */
}
.scrolltable thead tr {
position: relative;
}

</style>

<body>
  <div  class="datatable scrolltable">
<TABLE border=1 id="kk">
<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>
<tbody>
<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>
</tbody>
</TABLE>
</div>
<label>需要注意表格的头，必须在滚动时保持不动！</label>
</BODY>
</HTML>

 

w375179337
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS控制表头不动，表单内容滚动
weixin_42120621的博客
12-20 3541
在工作中做项目时遇到一个需要固定表头的需求，总结思考如下： 要使表单滚动的同时表头固定不动，则要求需要将表头和表单分离开来，可以将这两部分分别放在一个table里面，然后分别控制table的样式。本次不采用这种方法，而是使用table里面自带的thead和tbody属性。 首先创立一个表格 <!DOCTYPE html> <html> <head> &...
html怎么让表头不滚动条,table固定表头，tbody滚动条样式设置以及填的几个坑
weixin_34310322的博客
06-23 2436
工作中或许会用到 table 表格固定表头， tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。今天研究了一下，整理了几种方案：有的建议使用：position: absolute 或者 position: fixed;.tablethead{position:absolute;top:0;left:0;}或者.tablethead{position:fix...
table表头固定，表格数据内容滚动
工作中学习，学习中进步
02-18 719
目的：方便运营人员查看第二屏的数据，能直观的查看数据对应关系 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table表头固定</title> <style> table{ border-collapse: collapse; bord
table 表头固定，表体滚动的css方法
Mr_rencp的博客
09-08 1961
table tbody {       display:block;       height:500px;       overflow-y:scroll;   }         table thead, tbody tr {       display:table;       width:100%;       table-layout:fixed;   }    
表头固定内容滚动【css笔记】
日々精進
02-02 547
参照
实现固定表头和表列的table组件
wrc的专栏
12-13 2181
实现固定表头和表列的table组件
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决layui表格的表头不滚动的问题
10-16
首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法，将表头和内容分开处理。 步骤如下： 1. 创建两个 ...
BootStrap的table表头固定tbody滚动的实例代码
09-01
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
表格头部固定不动，数据滚动插件
05-27
总之，“表格头部固定不动，数据滚动插件”提供了一种有效提升表格数据浏览体验的解决方案，通过锁定表头，使用户在滚动时始终能保持对数据列的理解。通过深入理解这个插件的原理和使用方法，你可以轻松地在自己的...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
table固定表头
bluelotos893的博客
04-01 3016
table内容很多的时候需要固定表头以获取更好的浏览体验，这就需要另外制作一个内容一样的表头来掩人耳目，但是由于是两个不同的表格，随着真实表格内容的变化，真实表格表头的宽度也会随之变化，而赝品的表格则不会变化，分分钟就露馅了。 解决思路： 保持两个表格的宽度一致 保持表头的th或者tr宽度一致 保持两个表格的边框、padding样式一致 赝品的表格定位在顶部不跟随滚动 表格数据变化时宽度会改变...
el-table显示滚动条，但表头固定（解决方法）
weixin_38345306的博客
03-07 5771
el-table显示滚动条，但表头固定（解决方法）
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 3062
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
html table 表头停留,HTML table固定表头
weixin_42393272的博客
06-17 589
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....1.thead和tbody的display设置为block;这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;2.用两个table模拟,第一个作为thead,第二个作为tbody;需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框...
table固定表头、固定列
RRRRRDong的博客
07-17 8335
最近在做一些报表，使用原生table画的，记录一下固定表头的一些方法。 使用position:sticky来固定表头 html: <div id="common-table"> <table id="table-container" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>1</th>
在Tabel中使<th>不滚动，内容增加滚动条
hgx0615的专栏
04-06 290
  var $modify_log=$("#modify_log");        $modify_log.empty();              var $trBody=$('&lt;tr /&gt;');       $modify_log.append($trBody);       var $tdBody=$('&lt;td colspan="4"/&gt;');       $t...
完美解决html表格表头固定存在的问题
qq_44765467的博客
09-20 2219
完美解决html表格表头固定存在的问题    当表格数据较多出现滚动条时，很多地方都有固定表头的需求。在网上查找资料，发现了一个比较简洁的方法。 代码如下： 1.css样式： th{ background-color: brown; } table,th,td{ border:1px solid gray; padding:2px; text-align: center; } ...
table固定表头不滚动
最新发布
09-08
要实现固定表头不滚动的效果，可以使用 CSS 的 `position: sticky` 属性。这将使表头在滚动时保持固定的位置。 以下是一个示例代码： ```html table { width: 100%; border-collapse: collapse; } th { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值