如何将table的前几行几列锁定,其他部分自由滚动?

where445 2007-08-14 10:15:52
如题,另外最好可以控制一下锁定行列的外观以示区别
...全文
791 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
yixianggao 2007-08-14
  • 打赏
  • 举报
 回复
IE 6，IE 7 下测试通过！

原因出在 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话，改成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 或不要这句均可！

修正后代码如下，L@_@K：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>lock column and table header</title>
<meta name="generator" content="editplus" />
<meta name="author" content="yixianggao@126.com" />
<meta name="keywords" content="javascript" />
<meta name="description" content="for javascript region of csdn" />
<style type="text/css">
#divdatagrid
{
overflow: auto;
scrollbar-base-color: #b0c4de;
height: 150px;
width: 200px;
}
td {
border: #a4cdf2 1px solid;
font-family: "courier new";
font-size: 11pt;
}
th
{
font-family: "courier new";
font-size: 11pt;
line-height: 1.5em;
color: #333333;
background-color: #e3e3e3;
border: #a4cdf2 1px solid;
border-top-width: 2px;
border-bottom-width: 2px;

position: relative;
top: expression(document.getElementById("divDatagrid").scrollTop);
z-index: 10;
}
td.locked, th.locked {
font-family: "courier new";
font-size: 11pt;
color: #333333;
background-color: #e3e3e3;
border: #a4cdf2 1px solid;

position: relative;
left: expression(document.getElementById("divDatagrid").scrollLeft);
}
th.locked {
z-index: 99;
}
</style>
</head>

<body>
<div id="divDatagrid">
<table cellspacing="0" rules="all" border="1" id="dgdTest" style="border-collapse:collapse;">
<tr>
<th class="locked">c1</th><th>c0</th><th>c1</th><th>c2</th><th>c3</th><th>c4</th><th>c5</th><th>c6</th><th>c7</th><th>c8</th><th>c9</th><th>c10</th><th>c11</th><th>c12</th><th>c13</th><th>c14</th>
</tr><tr>
<td class="locked">0-1</td><td>0-0</td><td>0-1</td><td>0-2</td><td>0-3</td><td>0-4</td><td>0-5</td><td>0-6</td><td>0-7</td><td>0-8</td><td>0-9</td><td>0-10</td><td>0-11</td><td>0-12</td><td>0-13</td><td>0-14</td>
</tr><tr>
<td class="locked">1-1</td><td>1-0</td><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td><td>1-6</td><td>1-7</td><td>1-8</td><td>1-9</td><td>1-10</td><td>1-11</td><td>1-12</td><td>1-13</td><td>1-14</td>
</tr><tr>
<td class="locked">2-1</td><td>2-0</td><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td><td>2-6</td><td>2-7</td><td>2-8</td><td>2-9</td><td>2-10</td><td>2-11</td><td>2-12</td><td>2-13</td><td>2-14</td>
</tr><tr>
<td class="locked">3-1</td><td>3-0</td><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td>3-8</td><td>3-9</td><td>3-10</td><td>3-11</td><td>3-12</td><td>3-13</td><td>3-14</td>
</tr><tr>
<td class="locked">4-1</td><td>4-0</td><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td><td>4-8</td><td>4-9</td><td>4-10</td><td>4-11</td><td>4-12</td><td>4-13</td><td>4-14</td>
</tr><tr>
<td class="locked">5-1</td><td>5-0</td><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td><td>5-8</td><td>5-9</td><td>5-10</td><td>5-11</td><td>5-12</td><td>5-13</td><td>5-14</td>
</tr><tr>
<td class="locked">6-1</td><td>6-0</td><td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td><td>6-8</td><td>6-9</td><td>6-10</td><td>6-11</td><td>6-12</td><td>6-13</td><td>6-14</td>
</tr><tr>
<td class="locked">7-1</td><td>7-0</td><td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td>7-8</td><td>7-9</td><td>7-10</td><td>7-11</td><td>7-12</td><td>7-13</td><td>7-14</td>
</tr><tr>
<td class="locked">8-1</td><td>8-0</td><td>8-1</td><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td><td>8-8</td><td>8-9</td><td>8-10</td><td>8-11</td><td>8-12</td><td>8-13</td><td>8-14</td>
</tr><tr>
<td class="locked">9-1</td><td>9-0</td><td>9-1</td><td>9-2</td><td>9-3</td><td>9-4</td><td>9-5</td><td>9-6</td><td>9-7</td><td>9-8</td><td>9-9</td><td>9-10</td><td>9-11</td><td>9-12</td><td>9-13</td><td>9-14</td>
</tr>
</table>
</div>
</body>
</html>
where445 2007-08-14
  • 打赏
  • 举报
 回复
IE6下 Column E列错位了,不过差不多
yixianggao 2007-08-14
  • 打赏
  • 举报
 回复
原来在 IE 6 下面试验过可以，

不过刚才 IE 7 下发现效果不对了，IE 7 越修麻烦越多了！

楼主如果用 IE 6 看看效果对不？俺用 IE 7，效果一塌糊涂了，哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>lock column</title>
<meta name="generator" content="editplus" />
<meta name="author" content="yixianggao@126.com" />
<meta name="keywords" content="javascript" />
<meta name="description" content="for javascript region of csdn" />
<style type="text/css">
table {
border: #a4cdf2 1px solid;
}
th {
border: #a4cdf2 1px solid;
font-family: "courier new";
font-size: 11pt;
background-color: #ffff82;
position: relative;
top: expression(document.getElementById("divTableContainer").scrollTop);
z-index: 10;
}
td.locked {
position: relative;
left: expression(document.getElementById("divTableContainer").scrollLeft + "px");
background-color: #ffff82;
}
td {
border: #a4cdf2 1px solid;
font-family: "courier new";
font-size: 11pt;
}

</style>
</head>

<body>
<div id="divTableContainer" style="width: 298px; overflow: auto;">
<table cellpadding="0" cellspacing="0" id="tabTarget">
<tr>
<th nowrap class="locked">Column A</th>
<th nowrap>Column B</th>
<th nowrap>Column C</th>
<th nowrap>Column D</th>
<th nowrap>Column E</th>
</tr>
<tr>
<td class="locked">R1.1</td>
<td>R1.2</td>
<td>R1.3</td>
<td>R1.4</td>
<td>R1.5</td>
</tr>
<tr>
<td class="locked">R2.1</td>
<td>R2.2</td>
<td>R2.3</td>
<td>R2.4</td>
<td>R2.5</td>
</tr>
<tr>
<td class="locked">R3.1</td>
<td>R3.2</td>
<td>R3.3</td>
<td>R3.4</td>
<td>R3.5</td>
</tr>
</table>
</div>
</body>

</html>
where445 2007-08-14
  • 打赏
  • 举报
 回复
没有人啊 不会是分少吧
where445 2007-08-14
  • 打赏
  • 举报
 回复
谢谢 可是水平滚动时Column A没有锁定啊,另外表头跨行的话还支持吗?
BootStrapTable表格利器通用教材
适用人群开发从业人员，产品原型人员，IT相关从业人员，想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言动态列：导出各种格式（支持xls，xlsx的office2003-office2019）
html滚动条固定前几行,怎么将table的前几行几列锁定,其他部分自由滚动
当前位置:我的异常网» JavaScript»怎么将table的前几行几列锁定,其他部分自由滚动怎么将table的前几行几列锁定,其他部分自由滚动www.myexceptions.net网友分享于：2013-02-25浏览：252次如何将table的前几行几列锁定,其他部分自由滚动?如题,另外最好可以控制一下锁定行列的外观以示区别------解决方案------------------...
Java表格Table冻结前几列或者前几行，其余行或列自由滑动。
Java表格Table冻结前几列或者前几行 实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 一、实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。 例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行...
JQUERY冻结table行或列js
freezeTable.js/* * 锁定表头和列 * * 参数定义 * table - 要锁定的表格元素或者表格ID * freezeRowNum - 要锁定的前几行行数，如果行不锁定，则设置为0 * freezeColumnNum - 要锁定的前几列列数，如果列不锁定，则设置为0 * width - 表格的滚动区域宽度 * height - 表格的滚动区域
table表格实现行、列冻结
客户要求实现对表格数据的头几行或者头几列进行冻结，即滚动时保持这几行/列不动，通过网上查找代码，参考已有的代码的思路，实现了可以任意对行、列进行冻结。 实现原理： 创建多个div，div之间通过css实现层叠，每个div放置当前表格的克隆。例如：需要行冻结时，创建存放冻结行表格的div，通过设置z-index属性和position属性，让冻结行表格在数据表格的上层。同理，需要列冻结时，创建...
JavaScript

87,903

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章