表头不动 内容可滚动

最新推荐文章于 2023-04-14 13:34:06 发布
最新推荐文章于 2023-04-14 13:34:06 发布
阅读量526 收藏
点赞数
分类专栏： web 前台html 文章标签： html Html HTML table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fffgggzzz/article/details/8531967
版权

<!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="">
  <style type="text/css">
  div tr td{
 border-bottom:1px solid gray;
 width:100px;
 empty-cells:show;//hide
  }
  .lastTd{
 border-bottom:none;
  }
  </style>
 </HEAD>

 <BODY>
  <br/>
  <div style="width:800px;height:125px;border:1px solid gray;background:white;">
 <div style="width:100%;padding-right:17px;">
  <TABLE style="border-right:1px solid gray;width:100%;height:25px;" cellSpacing=0 cellPadding=2>
    <TR align="center">
   <TD width="20%">title A</TD>
   <TD width="20%">title B</TD>
   <TD width="20%">title C</TD>
   <TD width="20%">title D</TD>
   <TD width="20%">title E</TD>
    </TR>
   </table>
 </div>
 <div style="overflow-y: scroll;border:0px solid red;height:115px;background:white;">
  <TABLE style="border:0px solid gray;width:100%;border-bottom:none;border-top:none;" cellSpacing=0 cellPadding=2>
    <TR align="center">
   <TD width="20%">A</TD>
   <TD width="20%">B</TD>
   <TD width="20%">C</TD>
   <TD width="20%">D</TD>
   <TD width="20%">E</TD>
    </TR>
    <TR align="center">
   <TD>B</TD>
   <TD>B</TD>
   <TD>C</TD>
   <TD>D</TD>
   <TD>E</TD>
    </TR>
    <TR align="center">
   <TD>C</TD>
   <TD>B</TD>
   <TD>C</TD>
   <TD>D</TD>
   <TD>E</TD>
    </TR>
    <TR align="center">
   <TD>D</TD>
   <TD>B</TD>
   <TD>C</TD>
   <TD>D</TD>
   <TD>E</TD>
    </TR>
    <TR align="center">
   <TD>C</TD>
   <TD>B</TD>
   <TD>C</TD>
   <TD>D</TD>
   <TD>E</TD>
    </TR>
    <TR align="center">
   <TD>D</TD>
   <TD>B</TD>
   <TD>C</TD>
   <TD>D</TD>
   <TD>E</TD>
    </TR>
    <TR align="center">
   <TD id="lastTd">E</TD>
   <TD id="lastTd">B</TD>
   <TD id="lastTd">C</TD>
   <TD id="lastTd">D</TD>
   <TD id="lastTd">E</TD>
    </TR>
   </table>
 </div>
  </div>

  <br/>
 </BODY>
</HTML>

fangz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表格滚动，表头不滚动，表数据内容滚动
Caroline_Yang的博客
08-21 1864
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;meta name="viewport" content="wi
解决layui表格的表头不滚动的问题
10-16
首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法，将表头和内容分开处理。 步骤如下： 1. 创建两个 ...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
纯脚本搞定DataGrid表表头不动，表身滚动
weixin_34226182的博客
01-28 122
先看效果： 　　孟子以前也做过这事，不过他的方法前台后台都要弄，还是VB的(^-^)，好像也不支持像我的自动生成列的DataGrid，所以还是自己动手，纯脚本搞掂，其实很简单，就几行： function ScrollDataGrid()　　　　{　　　　　　var tb = document.getElementById("tbHeader");　　　　　　var dg = documen...
标题不动，内容在动
Andrewvw的博客
06-19 163
如图。 要实现 这种效果。 在wxml中将container中的overflow设置为scroll即可 意思为内容在一定的框框中滑动 小白创作，恳请大佬指点
css列名不动_表头不动，内容滚动的例子(纯css+html)
weixin_39700397的博客
12-20 617
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...
一个table表头固定，内容可滚动的实用例子
10-20
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
jQuery实现表头固定表格内容滚动效果
11-02
在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...
动态表格【悬浮表头并结合滚动条滚动表格内容】
09-29
使用bootstrap编写的动态表格【当滚动纵向的滚动条时，表格的表头处于悬浮状态，表格的内容滚动；当滚动横向的滚动条时，表格的表头和表格的内容对应着一起滚动】
【WPS】表格设置标题固定不滚动
GreAmbWang的博客
05-02 3932
选择开始--冻结窗格--冻结首行 如果想设置多行标题，设置多行固定不滚动，则选择多行，选择开始--冻结窗格--冻结窗格 这样，就可以了，即是滚动到最下面，冻结的窗格还是固定不滚动 ...
[总结]DataGrid 固定表头实现（纵向和横向滚动条滚动，而Header不动）
weixin_34174132的博客
08-15 191
1.用Css来定制DataGrid表头HeaderStyle的cssclass属性.fixTitle{ /*background: navy; color: white;*/ position: relative; top: expression(this.offsetParent.scrollTop);}    1    &lt;DIV style="Z-INDEX: 102; LEFT...
table表头固定，内容滚动
最新发布
weixin_44037153的博客
04-14 3940
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
制作滚动表格，表格头不动，内容滚动
oldmonk
08-25 1204
&#13; 有这个需求，其实也不难，就是弄两个表格组合，结合marquue标签就行了，代码如下：&#13; &#13; 1 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;&#13; ...
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1707
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
Table表头固定，内容可以滚动
weixin_30340745的博客
02-27 355
　　对于table表的操作，网上插件有很多，比如说表很长的时候出现滚动条，往下拉滚动条表头能固定，再比如说，我拖拽表头的改变列宽等等，虽然最后我用的是一个网上的插件（这个插件并不好用，迟早我会自己写一个表格的插件），但是我还是想谈一谈表头固定的方法。 　　1.首先需要把表头放在一个table里面，如下tableHead <table width="100%" border="1" i...
bootstrap table 表头固定表体滚动
03-29
在 Bootstrap 中，可以使用固定表头和滚动表体的插件来实现这个效果。以下是实现步骤： 1. 引入必要的文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 2. 创建一个表格，并在表格头部添加 `thead` 标签： ``` <table class="table table-bordered table-striped"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> ``` 3. 使用 JavaScript 初始化表格，并调用插件： ``` $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); ``` 其中，`fixedHeaderTable` 是插件名称，`fixedColumn: true` 表示需要固定表头。 4. 根据需要调整样式： ``` .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } ``` 其中，`.table-fixed-header` 是插件自动生成的类名，可以根据需要进行修改。 完整代码如下： ``` <!DOCTYPE html> <html> <head> <title>Bootstrap Table 表头固定表体滚动</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-striped table-fixed-header"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> </div> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fixed-header-table@1.3.2/dist/fixed-header-table.min.js"></script> <script> $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值