固定表头带滚动条的HTML表格

最新推荐文章于 2022-05-25 19:10:20 发布
最新推荐文章于 2022-05-25 19:10:20 发布
阅读量587 收藏
点赞数
分类专栏： html

固定表头带滚动条的HTML表格


<html>
<head>
</head>
<BODY>
<DIV align=center>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=1 cellPadding=0 width=400 border=0>
<TR>
<TD>
<TABLE cellSpacing=1 cellPadding=0 width="100%" align=center summary="" border=0>
<TR>
<TD align=middle bgColor=#000080 colSpan=5><FONT color=#ffffff size=2>商场本月销售统计表</FONT></TD>
</TR>
<TR>
<TD width="24%" bgColor=#6c95d0><FONT size=2>商品名</FONT></TD>
<TD width="24%" bgColor=#6c95d0><FONT size=2>上旬</FONT></TD>
<TD width="24%" bgColor=#6c95d0><FONT size=2>中旬</FONT></TD>
<TD width="24%" bgColor=#6c95d0><FONT size=2>下旬</FONT></TD>
<TD width="4%" bgColor=#6c95d0><FONT size=2>　</FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<DIV style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 150px">
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 height=273 cellSpacing=1 cellPadding=12 width="99%">
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
<TR>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>洗洁精</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>2321</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>4521</FONT></TD>
<TD width="25%" bgColor=#ffffd9 height=17><FONT size=2>1203</FONT></TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>

</BODY>
</HTML>

qianjin_40
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular8 实现table表格表头固定效果
01-21
最近项目中有个需求，表头固定，内部实现滚动条。除了单个表头，还有多个表头的情况（下一篇中介绍）。 效果图： html 结构 按区域划分可以分为三个大部分，一共是通过4个table 组合成一个整体的table。 然后通过 ...
[HTML]TABLE固定表头和行头
王德封-逐浪
07-31 1万+
 TABLE固定表头和行头  html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>无标题文档title>style>    body{font-size:12px;
HTML表格实现固定表头 内容滚动
乐逍遥
05-25 847
分成两个表格 就可以了 比如 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> table { border-color: #e4e4e4; bor...
HTML表头固定，内容滚动实现
Fuwj001的博客
07-10 2900
在前端开发过程中，经常会遇到一个需求就是，需要一个表格展示数据， 1、表头固定，内容过多的时候向下活动，表头不跟随移动，若表体内容超长时，表头不能移动，表体内容滚动显示； 2、表格头横向随表格内容横向滚动； 效果展示： 关键技术点： 1、表头（意义上的）和表体（意义上的）都用一个table来显示； 2、因为表体可以纵向滚动，右边多出一个纵向滚动条，所以表体的宽度要比表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，
html 表格加滚动条
guoxiaohuivip的博客
02-22 1万+
思路： 1.表格放在Div中，设定Div的宽度和高度（不能用百分比），并设置纵向滚动条始终显示。 2.设定表格的宽度比Div小一个滚动条的宽度（如Div宽度为500，滚动条宽度为16，则表格的宽度应该设置为500-16=484）。 3.表格采用 thead,th标签            Header       1     Header       2
使用html中的table实现内容滚动下拉表头固定不动的方法
徊忆羽菲
08-06 4620
使用html中的table实现内容滚动下拉表头固定不动的方法 序号内容 1 我只是用来测试的 2 我只是用来测试的 3 我只是用来测试的 4 我只是用来测试的 5 我只是用来测试的 6 我只是用来测试的 7 我只是用来测试的 8 我只是用来测试的 9 我只是用来测试的 10 我只是用来测试的 11 我只是用来测试的 12 我只是用来测试的 13 我只是用来测试的 14 我只是用来测试的 15 我只是用来测试的 ...
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...
HTML CSS 表格固定表头、和指定字段，实现表格内部滚动条
04-27
HTML CSS 表格固定表头、和指定字段，实现表格内部滚动条
JS固定表头和左边列V2.0（源码）
07-31
2.表格父容器尺寸大小改变时，需要调用 setBoxSize 方法，目的是判断父容器是否出现滚动条 1.1 修正了对IE6、IE7的兼容问题 1.2 修正了固定行、列的样式问题 1.3 IE6/IE7浏览器 不启用该功能 1.4 增加了拆分线，...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...
HTML表格滚动条 两种形式
06-25
表格也可做成滚动条 用处不是很大,初学者可学习
html表头固定 表体滚动
06-22
html表头固定 表体滚动,代码简单，通俗易懂
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
html 表头和第一列固定.html，可拖拽
08-22
html table 固定表头和列，下载后，右键浏览器打开运行页面即可看到效果
HTML 表格滚动锁定表头，实现固定行列
qq_25775675的博客
04-01 1万+
这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。 主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。
HTML table表格 固定表头 tbody加滚动条
热门推荐
沐枫
12-31 1万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
表头固定内容可滚动表格的3种实现方法
weixin_30565327的博客
12-14 1674
有时候，我们在开发前端页面过程中，可能会用到这种表格：表头固定不动，表格内容（<tbody>）需要竖直滚动。 像这样的： 还有这样的： 通过研究，我大致总结了以下三种实现办法供大家参考，如果有错误之处敬请指正，也欢迎拍砖！！ 一、表格总宽度自动，每列宽度设置统一用<colgroup>设置 这种实现方法最简单，只需要用两个表格，一个表格作为表头，另一个表格用<...
vxe-grid 自动横向滚动条，表格表头跟着滚动
最新发布
03-25
vxe-grid 是一个基于 Vue.js 的表格组件库，提供了自动横向滚动条和表头跟着滚动的功能。 当表格内容过多，超出了容器宽度时，vxe-grid 会自动出现横向滚动条，用户可以通过滚动条来查看隐藏部分的内容。同时，表头...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值