`

固定表行列

HTML 
阅读更多
将下列代码copy到html文件中就ok了~

<html>
<head><title></title></head>
<style>
.ListTableF {
border:1px solid #8EC2E6;
border-collapse:collapse;
BORDER-BOTTOM: medium none;
     BORDER-LEFT: medium none;
     BORDER-RIGHT: medium none;
     BORDER-TOP: medium none;
     margin-top:-1px;
     margin-left:-1px;
     margin-right:-1px;
}
.fixedDiv{
overflow:auto;
height:expression(document.body.clientHeight-240);
width:expression(800);
BORDER-BOTTOM: #94B6E6 1pt solid;
    BORDER-LEFT: #94B6E6 1pt solid;
     BORDER-RIGHT: #94B6E6 1pt solid;
     BORDER-TOP: #94B6E6 1pt solid ;
overflow-x:scroll;
}
.fixedHeaderTr {
position:relative;
top:expression(this.offsetParent.scrollTop);
z-index:20;
}
.fixedHeaderTd {
position:relative;
left:expression(this.offsetParent.scrollLeft);
z-index:10;
}
.TableRow {
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px; 
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
}
.TableRow1 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px; 
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:10;
}
.TableRow2 {
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
position: relative;
background-repeat:repeat;
background-position : center left;
BACKGROUND-COLOR: #AEC2E6;
font-size: 12px; 
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
height:22;
font-weight: bold;
valign:middle;
z-index:30;
}
.RecordRow {
border: inset 1px #94B6E6;
BORDER-BOTTOM: #94B6E6 1pt solid;
BORDER-LEFT: #94B6E6 1pt solid;
BORDER-RIGHT: #94B6E6 1pt solid;
BORDER-TOP: #94B6E6 1pt solid;
font-size: 12px;
border-collapse:collapse;
height:22;
}    
</style>
<body>
<div class="fixedDiv">
<table width="1000" border="0" cellspacing="0"  align="center" cellpadding="0" 
class="ListTableF">
<tr class="fixedHeaderTr">
  <td align="center" width="125" class="TableRow2">第一列</td>
  <td align="center" width="125" class="TableRow">第二列</td>
  <td align="center" width="125" class="TableRow">第三列</td>
  <td align="center" width="125" class="TableRow">第四列</td>
  <td align="center" width="125" class="TableRow">第五列</td>
  <td align="center" width="125" class="TableRow">第六列</td>
  <td align="center" width="125" class="TableRow">第七列</td>
  <td align="center" width="125" class="TableRow">第八列</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第一行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第二行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第三行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第四行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
</tr>
<tr>
  <td align="center" class="TableRow1">第五行</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
  <td align="center" class="RecordRow">&nbsp;</td>
</tr>
</table>
</body>
</html>

分享到：
| java中replace()和replaceAll()区别
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    CSS+TABLE固定行列表

    "CSS+TABLE固定行列表"就是这种技术的应用，它利用CSS样式来实现表格的行列固定。 首先，我们来看一下如何实现固定的表头。在HTML中，可以将表头放在`&lt;thead&gt;`标签内，然后通过CSS设置`position: fixed`属性。例如...

    jquery固定表格行列

    为了解决这一问题，我们可以利用jQuery库来实现表格的固定行列功能，让表头始终保持可见，即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先，确保在项目中引入jQuery库，可以使用CDN链接...

    js固定表格行列

    6. **库和框架支持**：目前有许多现成的JavaScript库和前端框架，如jQuery FixedHeaderTable、FrozenColumns for Handsontable、Bootstrap Table等，提供了内置的固定行列功能，开发者可以通过简单的配置和调用来...

    JQuery固定表头 及左侧列

    JQuery固定表头 及左侧列

    固定Table行列滚动.zip

    此外，考虑到响应式设计，我们需要确保在不同设备和窗口尺寸下，固定行列仍然能够正常工作。 对于压缩包中的 "Table固定行列滚动" 文件，这可能是一个示例代码或模板，包含实现上述功能的HTML、CSS和JavaScript代码...

    html+js+css固定表格行列

    通过结合HTML、CSS和JavaScript，我们可以创建一个功能完善的固定行列表格，使用户在浏览大数据集时能更方便地查看和操作。这个“SuperTables”项目就是这样一个实现，它包含了所有必要的代码和示例，可以帮助开发者...

    JS冻结表格,锁定表头,固定行列（上下左右4个方向）

    JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，...

    jQuery插件冻结行列、固定列固定行，html、table实现

    为了解决这个问题，开发者通常会采用冻结行列的技术，使得表头和关键列始终保持可见。本篇将详细介绍一个基于jQuery的插件，用于实现表格的行列冻结功能，以及如何在HTML和Table中应用。 该插件名为"jQuery-Plugin-...

    安卓Recycleview固定行列标题仿Excel

    "安卓Recycleview固定行列标题仿Excel"的主题是利用RecycleView实现类似电子表格的功能，即在滚动时保持顶部行和左侧列标题固定，以提供更好的用户界面体验。这在数据报表、表格类应用中尤为常见。 首先，要理解...

    HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）

    在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...

    JS固定表头和左边列V2.0（源码）

    修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性问题...

    dhtmlxgrid

    DHTMLXGrid的“固定表行列”功能解决了这个问题。它允许表头在滚动时始终保持可见，这样用户可以清楚地看到每一列的名称，而行号或列标识也会固定显示，提高了用户体验。 **主要特性** 1. **响应式设计**：DHTMLX...

    固定行列的table特效

    本教程将详细介绍如何利用HTML、CSS以及JavaScript实现一个具有固定行列效果的表格特效，使用户在滚动时仍能看到关键的列名和行标识。 首先，我们需要创建一个基本的HTML结构，包含一个表格元素（`&lt;table&gt;`）。表格...

    固定表头table

    这里的`setRepeatingRowsAndColumns`方法用于设置固定显示的行列范围。参数解释如下： - `sheetIndex`：指定的工作表索引（从0开始）。 - `startColumn`：重复列的起始索引。 - `endColumn`：重复列的结束索引。 - ...

    table固定行和列

    在深入学习CSS的同时，了解不同浏览器的兼容性和使用现代前端框架（如React、Vue、Angular等）中的表格组件也是很重要的，它们通常已经内置了对表格固定行列的支持，可以更方便地应用于复杂项目中。此外，掌握响应式...

    js实现table行列固定

    引用JS,固定table的前n行及前n列， @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]

    html行列表头锁定

    在网页设计中，"html行列表头锁定"是一种常见的需求，尤其在处理大数据表格时，为了保持用户在滚动查看表格内容时能始终看到列标题，就需要实现表头的固定锁定。这种技术通常应用于数据可视化、报表展示或者数据分析...

    JS固定表头和左边列（最新源码）1.9

    修正了重复生成锁定行列的问题以及生成错位的问题， 修正了行、列事件无法复制的问题， 增加了IE6/IE7/IE8 启用设置参数（ieLowVersionEnabled: true|false) ，默认不启用， 注：IE6/7/8锁定表头 由于兼容性...

    JS固定行列 适合表格列很多或者数据很长的情况

    本文将深入探讨如何利用JavaScript实现表格的固定行列。 首先，我们需要理解基本的HTML表格结构。`&lt;table&gt;`元素用于创建表格，`&lt;thead&gt;`定义表头，`&lt;tbody&gt;`包含表格的主体内容，而`&lt;tr&gt;`代表表格行，`&lt;th&gt;`是表头...

    固定表格行列(expression)在IE下适用

    在网页设计中，有时我们需要创建一个表格，其中某些行或列在用户滚动页面时始终保持可见，这种效果被称为“固定行列”。在早期的浏览器版本，尤其是Internet Explorer (IE)，实现这种效果的一个常见方法是利用CSS...

Magicbox
Global site tag (gtag.js) - Google Analytics