最简单的固定表格示例

最新推荐文章于 2024-11-07 10:38:40 发布
最新推荐文章于 2024-11-07 10:38:40 发布
阅读量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

固定表头和前三行，表格自动滚动
weixin_43805439的博客
04-30 699
固定表头和前三行，表格自动滚动
两种方式实现表格 固定列
sanlyshi's front-end road
06-14 4114
方案一： <!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 6209
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了 由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 div{ white-space: nowrap
Excel 表格中固定表头
cychai的专栏
11-04 2769
    当我们使用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 432
像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 1709
这篇文章主要为大家详细介绍了固定表格四周实现表格上下左右滚动的解决方法，表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定，本文为大家提供了思路，感兴趣的小伙伴们可以参考一下问题：最近做项目统计的时候碰见一个特定的需求，要求表格上下滚动时，表格头尾固定；左右滚动的时候表格，表格第一列最后一列固定。先上效果图可能会更明了些：左右滚动时，两列固定，头尾中间部分跟着滚动。上下滚动时...
最简单最实用的WEB表格锁定表头和固定数据列的方法示例
10-29
最简单最实用的WEB表格锁定表头和固定数据列的方法示例，提升WEB版的ERP系统用户体验。
基于bootstrap的表格头固定.zip_基于bootstrap的表格头固定
09-24
以下是一个简单的示例： ```html <!DOCTYPE html> , initial-scale=1.0"> 基于Bootstrap的表格头固定 /* 纯CSS实现 */ .fixed-header-table { position: relative; } .fixed-header-table thead { ...
HTML表格固定第一行第一列效果
11-06
为了解决这个问题，我们可以实现一个类似于Excel的功能，即在滚动时固定表格的第一行和第一列，使得在浏览大量数据时，关键的列名和行标识始终可见。以下将详细介绍如何实现这个效果。 首先，我们需要创建一个基本...
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 =...
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 659
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
HTML前端页面设计静态网站-仿百度
2402_86955314的博客
11-02 536
浅浅分享一下前端作业，大佬轻喷~
一七五、HTML 不同类型的事件及其说明和示例
最新发布
梅某某
11-07 589
HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
前端八股文(一)HTML 持续更新中。。。
DogEgg_001的博客
11-06 479
src：用于js脚本，img、iframe、script等标签加载时会阻塞主线程，将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内href：用于链接a、link等标签href指向外部资源所在的位置，和当前元素位置建立链接，将其下载的时候不会阻止其他资源的加载解析。
HTML 块级元素和内联（行内）元素详解
Allen-
11-03 203
块级元素是页面中的结构元素，它们独占一行，通常用于搭建页面的主要框架，如段落、容器、标题等。它们无论其内容多少，都会占据父元素的整个宽度。这种特性使得块级元素特别适合用于页面的整体布局和内容的分区组织。内联元素是页面中用于**修饰或嵌入小块内容的元素，它们不会独占一行，可以与其他内联元素或文本同行显示，因此也叫行内元素
HTML字符实体详解
Allen-
11-03 206
HTML 字符实体是在 HTML 文档中用来表示特定字符的特殊编码。这些字符可能因为直接输入而引发解析错误，或某些字符在 HTML 中具有特殊含义（例如，< 和 > 用于标签）。因此，使用字符实体可以确保文本的准确呈现。
HTML&CSS：呈现的3D树之美
weixin_52814911的博客
11-04 1307
这段代码通过HTML和CSS创建了一个具有3D效果的树的图形，包括分支、树干和阴影，通过自定义属性和复杂的变换实现了较为逼真的立体效果。
Vue.js实现表格表头首行固定效果
以下知识点将围绕如何使用Vue.js实现表格表头首行固定进行详细解释和示例代码说明。 在Vue.js中，要实现表格表头首行固定，通常有几种方法可以考虑： 1. 使用传统的CSS技术：通过设置CSS样式，利用`position: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值