`
ryan_ncu
  • 浏览: 69884 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Html中 表单title头固定的CSS实现,类似于Excel中窗口冻结的功能

阅读更多

Html中 表单title头固定的CSS实现,类似于Excel中窗口冻结的功能,能很好的增强易用性

 

<style type="text/css">
<!--
.fixTop {
	Z-Index:102;
	position:relative;
	Top:expression(this.offsetParent.scrollTop);
}

.fixLeft {
	Z-Index:101;
	position:relative;
	left:expression(document.getElementById('scrollDiv').scrollLeft);
	background-color:#eeeeee;
}
-->
</style>

仅适用于IE:
<div id="scrollDiv" style="height: 200px; width:400px; overflow: auto;">
<table border=1 cellspacing="0" cellpadding="2">
    <tr class="fixTop" bgcolor="#eeeeee">
        <th class="fixLeft">
            LeftTop
        </th>
		<th colspan="9" align=left>
			Top
		</th>
    </tr>    
   <tr height="50">
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>
   <tr height="50">
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>

   <tr height="50">
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>

   <tr>
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>

   <tr>
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>

   <tr>
	   <td  class="fixLeft">Left</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
	   <td>abcdefg</td>
   </tr>

</table>
</div>

 

分享到:
评论

相关推荐

    类似于Excel的表格控件

    总的来说,"类似于Excel的表格控件"是开发中不可或缺的一部分,它们通过提供类似Excel的功能,简化了数据管理和操作。通过研究和利用如Handsontable这样的库,开发者可以构建出强大且用户友好的应用程序。同时,学习...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏;

    在网页设计中,为了提供更好的用户体验,特别是在处理大型数据表格时,经常需要实现表头和侧栏的冻结功能。这使得用户在滚动查看表格内容时,表头和侧栏能够始终保持可见,方便用户定位和理解数据。标题"HTML, JSP, ...

    html5+css3实现酷炫的form表单

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能强大且视觉效果丰富的form表单提供了无限可能。在本教程中,我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先,HTML5引入了新的表单元素...

    HTML,JSP,JQ,JS冻结表单的表头和侧栏

    CSS在实现冻结效果中扮演关键角色。我们可以为表头和侧栏设置`position: fixed`,然后通过调整`z-index`来确保它们位于其他元素之上。对于侧栏,我们可能还需要设置`width`和`overflow`属性,以适应不同屏幕尺寸。...

    html表单css下载

    在"html表单css下载"中,我们可以讨论以下几个关键知识点: 1. **HTML表单元素**:HTML5提供了多种表单元素,如`&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;option&gt;`等。这些元素组合起来可以创建各种类型的...

    纯CSS实现漂亮的表单

    纯CSS实现的漂亮表单不仅可以提升用户体验,还能让网站看起来更加专业和美观。本篇文章将深入探讨如何使用CSS来创建一个既简洁又具有吸引力的表单。 首先,我们需要了解CSS的基本概念。CSS(Cascading Style Sheets...

    html5 css3在线留言表单美化代码

    在“texiao1089_1560680958”这个文件中,可能包含了实现上述功能的HTML和CSS代码示例。通过对这些代码的学习和理解,开发者可以掌握创建高效、美观的在线留言表单的技术,提升网站互动性和用户体验。同时,这样的...

    HTML5+CSS3超酷动态表单

    HTML5和CSS3是现代网页开发的两大核心技术,它们为创建功能丰富、视觉效果吸引人的动态表单提供了无限可能。本教程将深入探讨如何利用HTML5的新特性与CSS3的高级样式来构建一个"超酷动态表单",在用户输入时能够实现...

    CSS样式表单美化系列

    通过有效的CSS技巧,我们可以让表单不仅功能完善,而且视觉效果出众。 首先,我们来看表单的基本结构。一个标准的HTML表单通常由`&lt;form&gt;`标签开启,内含各种输入元素,如`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`,以及...

    POI单元格的合并、数据行的分组以及Excel窗口的冻结.doc

    标题中的“POI单元格的合并、数据行的分组以及Excel窗口的冻结”涉及到Apache POI库在处理Microsoft Excel文档时的一些高级功能。Apache POI是一个流行的Java库,它允许程序员创建、修改和显示MS Office格式的文件,...

    利用jqGrid实现类似Excel录入功能

    jqGrid是一款强大的JavaScript数据网格组件,它允许开发者在网页上创建类似于Excel的工作表,提供数据的展示、编辑、排序和过滤等功能。这篇文章将深入探讨如何利用jqGrid来实现类似Excel的录入功能,让用户能够在...

    HTML5+CSS3实现的表单美化带输入验证特效源码

    在“HTML5+CSS3实现的表单美化带输入验证特效源码”中,我们可以深入探讨这两个技术如何协同工作,创建出高效、交互性强且视觉上吸引人的表单。 首先,HTML5引入了许多新特性,对于表单元素的处理尤为突出。例如,`...

    6款漂亮HTML CSS样式用户留言表单的相关源码

    总之,这6款HTML CSS样式用户留言表单的源码,为网页设计师和开发者提供了一套丰富的模板,可以快速实现美观且功能齐全的反馈表单。它们不仅可以提升网站的整体设计感,还能有效提升用户与网站的互动体验,是优化UI...

    基于HTML/CSS/JS的酷炫登陆注册表单.zip

    在这个表单设计中,CSS被用来美化HTML元素,实现酷炫的视觉效果。这可能包括设置字体、颜色、背景、边框、布局以及动画效果。例如,可以使用`display`属性调整元素的显示方式,`box-shadow`添加阴影效果,`...

    HTML5+CSS3实现的表单浮动标签特效源码

    在这个“HTML5+CSS3实现的表单浮动标签特效源码”项目中,我们可以深入探讨这两者如何协同工作,创造令人印象深刻的用户界面。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新元素和API,以更好地支持网页...

    用excel自动填充网页表单

    标题“用Excel自动填充网页表单”简明扼要地概括了本文的主要内容:如何利用Microsoft Excel中的编程技术来实现自动填写网页上的表单。 #### 描述解析: 描述部分提供了更具体的信息:“代码实现用Excel表格中数据...

    基于html5+css3实现的精美聊天界面demo

    标签"css3-chart-window"可能指的是界面中包含了一个图表窗口,CSS3可以用于定制图表的样式,如数据点的形状、颜色,以及图表轴的样式。使用`linear-gradient`或`radial-gradient`可以创建独特的背景效果,增强图表...

    CSS表单设计最简单的,最基本的,CSS表单代码,html代码,表单标准化设计

    本教程将探讨关于“CSS表单设计”的基础知识,包括HTML代码结构和CSS样式化,以及如何实现表单的标准化设计。 首先,让我们从HTML代码开始。一个基本的HTML表单可能包含以下元素: 1. `&lt;form&gt;`标签:这是表单的...

    vue仿word表单录入demo

    本Demo旨在实现一个类似于Word的表单录入功能,让用户能够在一个网页环境中填写、编辑和保存数据,从而提供更加便捷的工作流程。 首先,`index.html`是项目的主入口文件,它包含了项目的基本结构和Vue实例的挂载点...

    html基础教程 表格与表单 图像和声音 框架 CSS.ppt

    在HTML中,元素位于文档顶部,其内容不会在浏览器窗口显示,但它可以包含如JavaScript脚本和CSS样式来增强网页功能和视觉效果。例如,标签用于指定页面的字符编码,如...

Global site tag (gtag.js) - Google Analytics