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

where445 2007-08-14 10:15:52
如题,另外最好可以控制一下锁定行列的外观以示区别
...全文
817 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用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没有锁定啊,另外表头跨行的话还支持吗?
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属性，让冻结行...
qtablewidget固定一列滚动_WPS表格：Excel如何固定某几行或几列，滚动拖动时固定不变？...
当表格很大时，为了方便观察数据，需要固定首行或者前几行；首列或者前几列；或者几行几列同时固定。固定了的行或列，不随拖动滚动。我们在WPS2019中以下表为例，演示如何冻结窗格？1.首先演示：怎样冻结首行或首列？确保顶部处于开始选项卡的时候，鼠标点击表格的第1行，A列。2.此时点击冻结窗格的下拉菜单,选择冻结首行。3.如下图，首行被冻结之后，向下滚动表格，首行是固定不变的。如果冻结首列，那么左右滚动...
html滚动条固定前几行,bootstrapTable定位行固定滚动条
写在前面：当页面table列表数据有修改后，用户需要再次回到修改的行位置。1.当修改行数据后，table刷新，行数据位置前后不发生改变 ，可使用下面这种方法：/*获取当前滚动条的位置*/var scollPostion = $(‘#table‘).bootstrapTable(‘getScrollPosition‘);var obj = $("#table tr:nth-child("+ (ind...
html滚动条固定前几行,使用elementui的table，固定前三行（这个几行可以自己自定义），其余的都从下往上无间隙滚动...
1.固定前三行。解决办法：使用两个table，第一个table只显示前三行，其余的隐藏，第二个table隐藏前三行，其余的都显示，这样就做到了固定2.除了前三行固定，其余的都滚动。解决办法：2-1.可以使用vue-seamless-scroll这个无缝滚动插件，本人测试过时可以使用的，有需要请看链接https://blog.csdn.net/tianbushengyinuo/article/det...
JavaScript

87,997

社区成员

224,709

社区内容

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

加载中

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

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

+ 用AI写文章