`
j2ee_zhongqi
  • 浏览: 209511 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

冻结table的行和列

jQuery.netBlogHTML 
阅读更多
    最近项目中发现talbe的列或者行太多展示不方便，需要冻结，网上找了找资料，实现了；在这给大家分享;

给一个例子冻结一列： 
<html>
<head>
    <title>Table列冻结</title>
<style type="text/css">
<!--
.scrollSpanX
{
vertical-align: top;
overflow-x: scroll;
text-align: left;
border: 1px solid;
}
.scrollSpanX TABLE
{
table-layout: fixed;
}
.scrollBodyX TR
{
position: relative;
}
.scrollBodyX TD
{
position: relative;
border-right: 1px solid;
border-bottom: 1px solid;
text-align: center;
word-break:break-all;
width: 128px;
}
.scrollFixedRowX TD
{
position: relative;
font-weight: bold;
background-color: #E9E9E9;
}
.scrollFixedColX
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
background-color: #E9E9E9;
z-index: 1;
}
-->
</style>
</head>
<body>
<div class="scrollSpanX" style="height:190px; width:640px;">
<table class="scrollBodyX" border="0" align="left" cellpadding="2" cellspacing="0">
    <thead class="scrollFixedRowX">
      <tr>
        <td align="center" nowrap class="scrollFixedColX">序号</td>
        <td align="center" nowrap> Test1</td>
        <td nowrap> Test2</td>
        <td nowrap> Test3</td>
        <td nowrap> Test4</td>
        <td nowrap> Test5</td>
        <td nowrap> Test6</td>
      </tr>
    </thead>
    <tbody id="tblListBody">
      <tr>
        <td align="center" class="scrollFixedColX">001</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">002</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">003</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">004</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">005</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">006</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">007</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">008</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">009</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
    </tbody>
</table>
</div>
</body>
</html>

另外还有一个冻结行和列的例子供大家参考；
一个jquery的例子参考：http://blog.csdn.net/digyso888/archive/2010/10/22/5959228.aspx
分享到：
| 一个离职操盘手的忠告
评论
2 楼 linzixiao 2012-07-03  
感谢分享
1 楼 guoweijian 2012-06-18  
灰常感谢，急需这样的例子。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    table的行列冻结、行冻结、列冻结

    本主题主要围绕"table的行列冻结、行冻结、列冻结"展开，讲解如何使用jQuery实现这一功能，并确保其在主流浏览器上的兼容性。 首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也...

    bootstrap-table-冻结列样例

    Bootstrap Table 的冻结列功能是通过其丰富的API和插件系统实现的。首先，你需要在HTML中引入Bootstrap Table所需的CSS和JavaScript库，包括jQuery、Bootstrap CSS、Bootstrap JavaScript以及Bootstrap Table的核心...

    table 冻结列原型

    总之，"table冻结列原型"是一个实用的网页开发工具，涉及到CSS布局、JavaScript事件处理和DOM操作等多个方面。对于想要提升用户体验的开发者和设计师来说，理解和掌握这种技术是非常有价值的。通过深入学习和实践，...

    bootstraptable冻结列例子.doc

    总结来说，Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数，使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数，你可以根据需求定制出...

    table的行列冻结

    在网页设计和开发中，"table的行列冻结"是一个常见的需求，特别是在处理大量数据时，为了提高用户体验，用户可能希望某些列或行始终保持可见，即使他们滚动页面。这个功能允许用户查看表格的上下文信息，而无需手动...

    bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行

    为了在项目中使用这个优化过的插件，你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS文件，然后通过设置特定的参数和方法来启用和配置冻结列、排序、列宽和合并行功能。在开发过程中，可以利用浏览器...

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

    该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...

    冻结(固定) 行或列 完整例子

    与冻结行类似，冻结列是将某一列固定在屏幕左侧，比如将第一列的分类信息固定，这样用户在水平滚动时仍能看到分类信息，方便查找和对比。 在jsp中，我们可以使用JavaScript库，如jQuery，配合CSS来实现这个效果。...

    HTML 实现行、列冻结功能

    将表格划分为头部（包含冻结的列）、左侧部分（包含冻结的行）和主体部分。这可以通过在HTML中创建多个`&lt;div&gt;`元素并分别设置不同的CSS样式来实现。 ```html &lt;table&gt; &lt;!-- 冻结的列 --&gt; &lt;/table&gt; &lt;table&gt; ...

    同时冻结行与列的Table for .net

    总的来说，"同时冻结行与列的Table for .net"是一个实用的解决方案，它结合了.NET和jQuery的优点，为开发者提供了一种高效的方法来创建具有高级交互功能的数据展示表格。通过学习和应用这个示例，开发者可以提升他们...

    QT Tabwidget 冻结表头和冻结列

    在"漫步繁华街"-...同时进行了抽象，提取，封装了一个独立的类，可以直接使用，只需要设定表头数据，内容数据，冻结列数据以及各个的颜色即可。 在这里感谢【漫步繁华街】的代码分享。

    jQuery实现冻结表格行和列

    针对冻结行、列和行列都冻结的情况，需要创建不同的div。例如，`_tableHead`用于存放冻结的行，`_tableColumn`用于存放冻结的列，而`_tableFix`用于存放同时冻结的行和列。这些div需要设置适当的`z-index`属性以...

    纯CSS渲染的html5冻结固定table表格首行首列示例

    纯CSS渲染的html5冻结固定table表格首行首列示例，完美滚动不出现空白线条

    table 冻结列

    JQUERY冻结table列, 多列或者单列都可以控制，仿excel的冻结列。 或者列过多,固定前两列保持不动 固定列

    H5 表格冻结首行，首列和最后一行

    页面显示表格，表格的首行冻结，首列冻结，最后一行也冻结，实现数据查看和合计查看的效果。DemoDemoDemoDemo

    table固定行和列

    在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...

    table冻结表头

    这个插件专门用于实现表格的头部和/或列的冻结，使得在浏览长表格时，表头始终可见，增强了用户体验。 "table冻结表头"是一款基于jQuery的轻量级插件，它允许开发者快速集成到项目中，通过简单的API调用，即可实现...

    asp.net webform冻结列 冻结表头 复杂表头

    总的来说，实现ASP.NET WebForm中的冻结列和冻结表头功能需要结合HTML、CSS和JavaScript技术，理解这些基本原理后，你可以根据项目需求进行调整和优化，以提供最佳的用户体验。在实际项目中，可以参考已有的开源库或...

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