<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>完美冻结列和行 </title>
<style type="text/css">
.FixedHeaderColumnsTableDiv
{
overflow: auto;
position: relative;
}
.FixedCell
{
position: relative;
top: expression(this.offsetParent.scrollTop);
left: expression(this.parentElement.offsetParent.scrollLeft);
z-index: 1800;
}
.FixedHeaderRow1
{
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: #ccc;
z-index: 300;
}
.FixedHeaderRow2
{
position: relative;
top: expression(this.offsetParent.scrollTop);
z-index: 290;
background-color:#ffccff;
}
.FixedDataColumn
{
position: relative;
left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
z-index: 200;
background-color: Aqua;
}
</style>
</head>
<body>
<div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
<table border="0" cellpadding="0" cellspacing="0" width="1200px">
<tr class="FixedHeaderRow1">
<td class="FixedCell" style="width: 80px">
header1
</td>
<td class="FixedCell" style="width: 80px">
header2
</td>
<td class="FixedCell" style="width: 80px">
header3
</td>
<td class="FixedCell" style="width: 80px">
header4
</td>
<td style="width: 80px">
header5
</td>
<td style="width: 80px">
header6
</td>
<td style="width: 80px">
header7
</td>
<td style="width: 80px">
header8
</td>
<td style="width: 80px">
header9
</td>
<td style="width: 80px">
header10
</td>
</tr>
<tr class="FixedHeaderRow2">
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px" align="center">
ss
</td>
<td class="FixedCell" style="width: 80px">
header16
</td>
<td class="FixedHeaderColumn1" colspan="7" align="center">
header17dddddddddddd
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
<tr>
<td class="FixedDataColumn">
col1
</td>
<td class="FixedDataColumn">
col2
</td>
<td class="FixedDataColumn">
col3
</td>
<td class="FixedDataColumn">
col4
</td>
<td>
col5
</td>
<td>
col6
</td>
<td>
col7
</td>
<td>
col8
</td>
<td>
col9
</td>
<td>
col10
</td>
</tr>
</table>
</div>
</body>
</html>
以上第一种方式摘自：http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6
下面开始第二种方式：
<html>
<head>
<title>表格行列冻结示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
td
{
height:30px;
width:180px;
}
</style>
</head>
<body>
<div style="OVERFLOW: scroll;width:100%;height:140px;">
<table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff">
<tr>
<td nowrap>第一列</td>
<td nowrap>第二列</td>
<td nowrap>第三列</td>
<td nowrap>第四列</td>
<td nowrap>第无列</td>
<td nowrap>第六列</td>
<td nowrap>第七列</td>
<td nowrap>第八列</td>
</tr>
<tr>
<td nowrap>第一行</td>
<td nowrap>1.1</td>
<td nowrap>1.2</td>
<td nowrap>1.3</td>
<td nowrap>1.4</td>
<td nowrap>1.5</td>
<td nowrap>1.6</td>
<td nowrap>1.7</td>
</tr>
<tr>
<td nowrap>第二行</td>
<td nowrap>2.1</td>
<td nowrap>2.2</td>
<td nowrap>2.3</td>
<td nowrap>2.4</td>
<td nowrap>2.5</td>
<td nowrap>2.6</td>
<td nowrap>2.7</td>
</tr>
<tr>
<td nowrap>第三行</td>
<td nowrap>3.1</td>
<td nowrap>3.2</td>
<td nowrap>3.3</td>
<td nowrap>3.4</td>
<td nowrap>3.5</td>
<td nowrap>3.6</td>
<td nowrap>3.7</td>
</tr>
<tr>
<td nowrap>第四行</td>
<td nowrap>4.1</td>
<td nowrap>4.2</td>
<td nowrap>4.3</td>
<td nowrap>4.4</td>
<td nowrap>4.5</td>
<td nowrap>4.6</td>
<td nowrap>4.7</td>
</tr>
</table>
</div>
<script language="javascript" src="frozenTable.js"></script>
<script language="javascript">
FrozenTable(oFrozenTable, 1, 1, 1);
function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft)
{
oFrozenTable.HeadRow = iFrozenRowHead;
var oDivMaster = oFrozenTable.parentElement;
if(oDivMaster.tagName != 'DIV') return;
if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
//创建并克隆LeftHead表格
if((iFrozenColLeft > 0) && (iFrozenRowHead > 0))
{
var oTableLH = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLH.insertBefore(newTBody);
oTableLH.id = "oTableLH";
oDivMaster.parentElement.insertBefore(oTableLH);
CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft)
oTableLH.srcTable = oFrozenTable;
with(oTableLH.style)
{
zIndex = 804;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建并克隆LeftFoot表格
if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0))
{
var oTableLF = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLF.insertBefore(newTBody);
oTableLF.id = "oTableLF";
oDivMaster.parentElement.insertBefore(oTableLF);
CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft)
oTableLF.srcTable = oFrozenTable;
with(oTableLF.style)
{
zIndex = 803;
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16;
}
}
}
//创建DivHead、创建并克隆HeadTar表格
if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivHead = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivHead);
var oTableHead = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableHead.id = "HeadTar";
oTableHead.style.position = "relative"
oTableHead.insertBefore(newTBody);
DivHead.insertBefore(oTableHead);
CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1)
HeadTar.srcTable = oFrozenTable;
with(DivHead.style)
{
overflow = "hidden";
zIndex = 802;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute';
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//创建DivFoot、创建并克隆FootTar表格
if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight))
{
var DivFoot = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivFoot);
var oTableFoot = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableFoot.insertBefore(newTBody);
oTableFoot.id = "FootTar";
oTableFoot.style.position = "relative"
DivFoot.insertBefore(oTableFoot);
CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1)
oTableFoot.srcTable = oFrozenTable;
with(DivFoot.style)
{
overflow = "hidden";
zIndex = 801;
pixelWidth = oDivMaster.offsetWidth - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
}
//创建DivLeft、创建并克隆LeftTar表格
if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth))
{
var DivLeft = document.createElement("DIV");
oDivMaster.parentElement.insertBefore(DivLeft);
var oTableLeft = document.createElement("TABLE");
var newTBody = document.createElement("TBODY");
oTableLeft.insertBefore(newTBody);
oTableLeft.id = "LeftTar";
oTableLeft.style.position = "relative";
DivLeft.insertBefore(oTableLeft);
CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft)
LeftTar.srcTable = oFrozenTable;
with(DivLeft.style)
{
overflow = "hidden";
zIndex = 800;
pixelWidth = oDivMaster.offsetWidth - 16
pixelHeight = oDivMaster.offsetHeight - 16
position = 'absolute'
pixelLeft = oDivMaster.offsetLeft;
pixelTop = oDivMaster.offsetTop;
}
}
//为主DIV附加onscroll事件
oDivMaster.attachEvent("onscroll", DivMasterScroll);
}
//+----------------------------------------------------------------------------
//
//功能描述：克隆表格
//
//输入参数：oSrcTable 源表格
// oNewTable 新表格
// iRowStart 克隆开始行
// iRowEnd 克隆结束行
// iColumnEnd 克隆结束列
//
//-----------------------------------------------------------------------------
function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd)
{
//循环控制参数
var i, j, k = 0;
//新增行、列
var newTR, newTD;
//新表格宽度、高度
var iWidth = 0, iHeight = 0;
//拷贝Attributes、events and styles
oNewTable.mergeAttributes(oSrcTable);
//循环克隆指定行
for (i = iRowStart; i < iRowEnd; i++)
{
newTR = oNewTable.insertRow(k);
//拷贝Attributes、events and styles
newTR.mergeAttributes(oSrcTable.rows[i]);
iHeight += oSrcTable.rows[i].offsetHeight;
iWidth = 0;
//循环克隆指定列
for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++)
{
newTD = oSrcTable.rows[i].cells[j].cloneNode(true);
iWidth += oSrcTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth;
}
k++;
}
oNewTable.style.pixelWidth = iWidth;
oNewTable.style.pixelHeight = iHeight;
}
//+----------------------------------------------------------------------------
//
// 功能描述：主DIV的onscroll事件
//
// 输入参数：无
//
//-----------------------------------------------------------------------------
function DivMasterScroll()
{
var oDivMaster = window.event.srcElement;
if(document.getElementById('HeadTar') != null)
{
document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('FootTar') != null)
{
document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft;
}
if(document.getElementById('LeftTar') != null)
{
document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop;
}
}
</script>
</body>
</html>
这个第二种方式摘自：http://blog.csdn.net/jiacky/article/details/1746976
相关推荐
首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也会始终保持可见，以便用户始终能看到关键信息。例如，表头通常会被冻结，以便用户在查看大量数据时能快速识别列内容。 在给定的...
标题中的“冻结table的行和列”主要涉及的是在Web开发或者电子表格软件中，如何设计和实现这一功能。在网页上，我们通常使用HTML、CSS以及JavaScript来构建交互式的表格。当用户滚动表格时，通过JavaScript监听滚动...
总之，"table冻结列原型"是一个实用的网页开发工具，涉及到CSS布局、JavaScript事件处理和DOM操作等多个方面。对于想要提升用户体验的开发者和设计师来说，理解和掌握这种技术是非常有价值的。通过深入学习和实践，...
本篇文章将详细介绍如何利用这两种技术在HTML表格中实现行和列的冻结。 首先，理解HTML表格的基础结构至关重要。HTML `<table>` 标签用于创建表格，而`<tr>` 表示行，`<th>` 用于定义表头，`<td>` 用于定义数据...
首先，为了使用 Bootstrap Table 的冻结列功能，我们需要在 HTML 页面中引入必要的 JavaScript 和 CSS 文件。这些文件包括 Bootstrap Table 的基础样式和脚本，以及扩展的冻结列插件。确保引入以下资源： ```html ...
页面显示表格，表格的首行冻结，首列冻结，最后一行也冻结，实现数据查看和合计查看的效果。DemoDemoDemoDemo
在网页设计和开发中，"table的行列冻结"是一个常见的需求，特别是在处理大量数据时，为了提高用户体验，用户可能希望某些列或行始终保持可见，即使他们滚动页面。这个功能允许用户查看表格的上下文信息，而无需手动...
总的来说，"bootstrap-table-冻结列样例"是一个教你如何在Bootstrap Table中实现列冻结的示例，这对于那些希望在网页中创建具有固定列的交互式表格的开发者来说非常有用。通过学习和理解这个样例，你可以提升你的...
为了在项目中使用这个优化过的插件，你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS文件，然后通过设置特定的参数和方法来启用和配置冻结列、排序、列宽和合并行功能。在开发过程中，可以利用浏览器...
在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...
总之，"table冻结表头"插件通过简单的集成和配置，为网页中的表格带来了强大的功能，帮助开发者解决了滚动时表头丢失的问题，提高了用户的交互体验。对于需要处理大量数据展示的项目，这款插件是不可或缺的利器。
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
总的来说，"同时冻结行与列的Table for .net"是一个实用的解决方案，它结合了.NET和jQuery的优点，为开发者提供了一种高效的方法来创建具有高级交互功能的数据展示表格。通过学习和应用这个示例，开发者可以提升他们...
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
表格通常包含多个列（`<th>`头元素）和行（`<tr>`数据元素）。然后，我们可以利用jQuery插件如`fixedHeaderTable`或`floatThead`来冻结表格的头部或左侧列。这些插件会动态地调整CSS样式，使指定的列在页面滚动时...
首先，我们需要创建一个包含多列和表头的HTML表格，然后通过CSS来设置样式，确保冻结部分的表格元素在滚动时固定位置。 1. 创建HTML表格： 在ASP.NET WebForm的.aspx文件中，构建一个标准的HTML表格结构，包括`...
标签中的"jsp"表示这个例子可能是在JSP页面中实现的，但冻结行或列的具体逻辑主要依赖于JavaScript和CSS。"js"和"css"则强调了这两个技术在实现过程中的重要性。 总结，冻结（固定）行或列是提高用户体验的关键技术...
在网页设计中，HTML表格（Table）是一种常用的数据展示方式，但当表格内容过多时，滚动查看会使得标题行消失，影响用户阅读。为解决这一问题，开发者通常采用JavaScript来实现Table标题行的固定，使其在滚动时始终...
总之，layui-soul-table是layui框架下的一款增强型表格组件，它提供了丰富的功能，如自定义表头、多行表头、隔行高亮、冻结行等，大大增强了HTML表格的表现力和可操作性。通过理解和运用其HTML源码，开发者可以轻松...
总之，通过结合CSS的定位属性和JavaScript的事件监听，我们可以实现在HTML表格中固定列的效果，从而提高用户在大量数据浏览时的体验。在实际开发中，可以根据具体需求进行优化和扩展，比如添加动画效果，增强交互...