冻结(固定)行或列完整例子_easyexcel冻结表头资源-CSDN文库

共2个文件

html：2个

4星 · 超过85%的资源需积分: 35 193 浏览量 2011-02-10 14:51:58 上传评论收藏 2KB ZIP 举报

在网页设计中，冻结（固定）行或列是一种常见的需求，尤其在处理大型数据表时，用户滚动查看数据时，需要保持表头或特定列不动，以便于参照。本示例提供两个独立的完整实例，涵盖了如何使用jsp、js和css来实现这一功能。我们来理解冻结行的概念。在网页表格中，冻结行通常指的是将表格的第一行（通常是表头）固定在屏幕顶部，即使用户向下滚动，表头也始终可见。这有助于用户在浏览大量数据时快速识别各列的含义。接下来，我们讨论冻结列。与冻结行类似，冻结列是将某一列固定在屏幕左侧，比如将第一列的分类信息固定，这样用户在水平滚动时仍能看到分类信息，方便查找和对比。在jsp中，我们可以使用JavaScript库，如jQuery，配合CSS来实现这个效果。创建一个包含表格的HTML结构，然后通过JavaScript获取到需要冻结的行或列，并设置CSS样式使其固定。例如，对于行，可以使用`position: fixed`和适当的`top`值；对于列，使用`position: fixed`和`left`值。 JS代码可能如下： ```javascript $(document).ready(function() { var header = $("#tableId thead"); header.css({ "position": "fixed", "top": "0" }); }); ``` CSS部分，确保冻结元素在页面布局中的正确位置，可能的样式如下： ```css thead { display: block; } tbody { display: block; overflow-y: auto; } ``` 此外，如果需要同时冻结行和列，可以为表头的特定列设置额外的CSS样式，例如： ```javascript $(document).ready(function() { var firstColumn = $("#tableId th:first-child"); firstColumn.css({ "position": "fixed", "left": "0" }); }); ``` 在CSS中，为了适应冻结的列，可能需要调整表格的宽度和内边距： ```css table { width: calc(100% + 30px); /* 30px 是冻结列的宽度 */ margin-left: -30px; /* 与宽度相减，保持表格整体对齐 */ } ``` 标签中的"jsp"表示这个例子可能是在JSP页面中实现的，但冻结行或列的具体逻辑主要依赖于JavaScript和CSS。"js"和"css"则强调了这两个技术在实现过程中的重要性。总结，冻结（固定）行或列是提高用户体验的关键技术之一，尤其在数据密集型的网页应用中。通过结合jsp、js和css，我们可以创建出动态且用户友好的表格，使得用户在滚动时依然能轻松定位和理解数据。本例提供的两个完整实例为开发者提供了实践这一功能的具体代码和思路。

资源推荐

资源详情

资源评论

收起资源包目录

冻结行列.zip （2个子文件）

冻结行列

冻结首列.html 3KB

冻结表头.html 4KB

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript"> function fixupFirstRow(tab) { var div = tab.parentNode; if(div.className.toLowerCase() == "freezediv"){ tab.rows[0].style.zIndex = "1"; tab.rows[0].style.position = "relative"; div.onscroll = function() { var tr = tab.rows[0]; tr.style.top = this.scrollTop - (this.scrollTop==0 ? 1 : 2); tr.style.left = -1; } } } window.onload = function(){ var tab = document.getElementById("freezedivTable"); if(tab){ fixupFirstRow(tab); } } </script> </head> <body> <div class=freezediv style="width: 100%; height: 140; overflow: auto;"> <table id=freezedivTable > <tr> <th nowrap="nowrap">序号</th> <th nowrap="nowrap">内容</th> </tr>  <tr> <td>1</td> <td>内容</td> </tr> <tr> <td>2</td> <td>内容</td> </tr> <tr> <td>3</td> <td>内容</td> </tr> <tr> <td>4</td> <td>内容</td> </tr> <tr> <td>5</td> <td>内容</td> </tr> <tr> <td>6</td> <td>内容</td> </tr> <tr> <td>7</td> <td>内容</td> </tr> <tr> <td>8</td> <td>内容</td> </tr> <tr> <td>9</td> <td>内容</td> </tr> <tr> <td>10</td> <td>内容</td> </tr> <tr> <td>11</td> <td>内容</td> </tr> <tr> <td>12</td> <td>内容</td> </tr> <tr> <td>13</td> <td>内容</td> </tr> <tr> <td>14</td> <td>内容</td> </tr> <tr> <td>15</td> <td>内容</td> </tr> <tr> <td>16</td> <td>内容</td> </tr> <tr> <td>17</td> <td>内容</td> </tr> <tr> <td>18</td> <td>内容</td> </tr> <tr> <td>19</td> <td>内容</td> </tr> <tr> <td>20</td> <td>内容</td> </tr> </table> </div> </body> </html>

评论收藏

内容反馈