最简单的固定表格示例

最新推荐文章于 2024-09-18 13:55:16 发布
最新推荐文章于 2024-09-18 13:55:16 发布
阅读量1k 收藏
点赞数
分类专栏： css 文章标签： html class border table 文档 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/showlin/article/details/893459
版权

csdn上有人问到，找了一个一直都在使用的发了，后来仔细一想，不用那么多麻烦，只要一个css样式就可以搞定了的

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>

<style type="text/css">
<!--
.blackscroll {
 overflow:auto;
 width:90%;
 height:100px;
}
.fix{
 position:relative; /* 就这个了*/
 }
-->
</style>

</head>

<body>
<div align="center" class="blackscroll" id="fixdiv">
  <table width="100%"  border="1" align="center" cellpadding="0" cellspacing="0">
    <tr bgcolor="#CCCCCC" class="fix">
      <td align="center">head1</td>
      <td>head1</td>
      <td>head1</td>
      <td>head1</td>
      <td>head1</td>
      <td>head1</td>
      <td>head1</td>
      <td>head1</td>
    </tr>
    <tr>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊啊啊啊啊</td>
      <td>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
    </tr>
    <tr>
      <td>啊啊啊啊啊啊啊啊啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td><p>啊啊啊啊</p>
      <p>&nbsp;</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>啊啊啊啊</p>
      <p>&nbsp;</p></td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊</td>
      <td>啊啊啊啊啊啊啊啊</td>
    </tr>
  </table>
</div>
</body>
</html>

另外蓝色理想上有篇文章是关于表格列锁定的，也很不错

http://www.blueidea.com/bbs/newsdetail.asp?page=9&id=2486328&Daysprune=&lp=1

showlin
关注
专栏目录
最简单最实用的WEB表格锁定表头和固定数据列的方法示例
10-29
最简单最实用的WEB表格锁定表头和固定数据列的方法示例，提升WEB版的ERP系统用户体验。
HTML表格固定第一行第一列效果
11-06
为了解决这个问题，我们可以实现一个类似于Excel的功能，即在滚动时固定表格的第一行和第一列，使得在浏览大量数据时，关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。 首先，我们需要创建一个基本...
固定表头和前三行，表格自动滚动
weixin_43805439的博客
04-30 657
固定表头和前三行，表格自动滚动
两种方式实现表格 固定列
sanlyshi's front-end road
06-14 4100
方案一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
ma524654165的博客
09-08 6197
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了 由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 div{ white-space: nowrap
Excel 表格中固定表头
cychai的专栏
11-04 2749
    当我们使用excel在制作表格时，数据量较大，如何使表头固定不动，其内容可以上下滚动呢？    经过使用，总结详细的方法：如果要在窗口顶部生成水平冻结窗格，请选定待拆分处下边一行。 如果要在窗口左侧生成垂直冻结窗格，请选定待拆分处右边一列。 如果要同时生成顶部和左侧冻结的窗格，请单击待拆分处右下方的单元格。 单击“窗口”菜单中的“冻结窗格”命令。  
Latex固定表格图片位置
热门推荐
FrankDura的博客
02-28 6万+
综述 有时候我们不需要latex的自动优化table和figure的位置，而是需要固定位置。 代码 使用package \usepackage{float} 在你的表格和图片选项中设置 [H] 即： \begin{table}[H] \centering \caption{结果分析表} \begin{tabular}{c|ccc} \hline 数据组数 &amp; 第1组...
html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
weixin_42134054的博客
06-26 422
像excel那样固定table的表头和第一列.left,.right{float: left;height: 297px;background-color: #ccc;}#left_topic{height: 248px;overflow-y:hidden}.left{width:112px; border:1px solid #333;border-right:none;}.right{bord...
html实现文字在表格上方左侧,html实现固定表格四周并且可以上下左右滚动
weixin_28406969的博客
05-31 1677
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法，表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定，本文为大家提供了思路，感兴趣的小伙伴们可以参考一下问题：最近做项目统计的时候碰见一个特定的需求，要求表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定。先上效果图可能会更明了些：左右滚动时，两列固定，头尾中间部分跟着滚动。上下滚动时...
基于bootstrap的表格头固定.zip_基于bootstrap的表格头固定
09-24
以下是一个简单的示例： ```html <!DOCTYPE html> , initial-scale=1.0"> 基于Bootstrap的表格头固定 /* 纯CSS实现 */ .fixed-header-table { position: relative; } .fixed-header-table thead { ...
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
09-17
以下是一个简单的QTableView使用示例，展示了如何创建一个4x4的表格，并填充数据： ```python import sys from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.QtGui import * class Table...
js读取json数据动态生成列数不固定的表格
08-22
动态生成列数不固定表格 let headers = Object.keys(data[0]); let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); // 创建表头 headers.forEach(header => { let th =...
在HTML中添加图片
Q18600000000的博客
09-15 479
标签中指定要显示的图像
网页打开时，下载的文件text/html/重定向类型有什么作用？
2301_79698214的博客
09-18 1048
Text类型在数据库设计中的应用非常广泛，主要因为它能够满足存储大量文本数据的需要，而不会成为性能瓶颈，尽管其存储效率相对较低，特别是在进行大量的数据读取和写入操作时‌1。通过重定向，可以将旧的URL指向新的URL，确保用户和搜索引擎能够顺利访问到更新后的内容，同时防止因结构调整导致的404错误。总的来说，Text类型在数据库中的应用主要是为了存储大量的文本信息，无论是普通文本还是特定格式的文本数据，如HTML或JSON格式的内容，它都提供了灵活且高效的存储解决方案。综上所述，当网页打开时下载的。
HTML讲解（一）body部分
2301_80349538的博客
09-18 581
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做web 页面。
窗口框架frame(HTML前端)
qq_74861982的博客
09-15 1132
我们要在另一个网页中显示，此时我们就要设置默认打开的网页，也就是a标签的target属性，记得先对要显示的网页设置一个name,方便指定网页打开。4.此时找到frame.html在浏览器中预览效果如下，我们可以看到，一个网页分为左中右三个小的网页了，并且三个小的网页显示的东西不同。作用：将网页分割为多个HTML页面，即将窗口分为多个小窗口，每个小窗口可以显示不同的页面，但是在浏览器中是一个完整的页面。然后我们在左边那个网页插入两个超链接，一个是个人简历，一个是兴趣爱好。点击我的兴趣爱好，将出现如何内容。
html，css基础知识点笔记（二）
最新发布
Zwwxd666的博客
09-18 935
本文主要教列表的样式设计。
Java html生成pdf和图片
weixin_43898271的博客
09-12 935
技术名称优点缺点适用场景Html2Image简单易用，轻量级，Java 原生支持支持 HTML、CSS 和 JS 的能力较弱静态 HTML 到图片的简单场景支持丰富的 HTML 和 CSS，输出多种格式不支持 JS 动态内容，转换步骤稍复杂静态 HTML 生成 PDF 或图片高质量渲染，支持复杂 HTML、CSS 和 JS需要外部工具，性能可能较慢需要高质量渲染的复杂页面完全支持动态页面和 JavaScript需要配置无头浏览器，资源消耗较大动态网页、复杂前端页面的截图。
c#读写一个固定表格的数据
06-08
好的，下面是一个简单的 C# 代码示例，用于读写一个固定表格的数据。 首先，我们需要引入 System.IO 和 System.Data 命名空间。 ```csharp using System.IO; using System.Data; ``` 然后，我们创建一个 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值