冻结table的行和列

最新推荐文章于 2022-08-12 09:59:43 发布
最新推荐文章于 2022-08-12 09:59:43 发布
阅读量161 收藏
点赞数
分类专栏： JavaScript/Html/JQuery 文章标签： jQuery .net Blog HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j2ee_zhongqi/article/details/83912105
版权
最近项目中发现talbe的列或者行太多展示不方便，需要冻结，网上找了找资料，实现了；在这给大家分享;

[b]给一个例子冻结一列：[/b] 
<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
j2ee_zhongqi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jtable冻结
flyonmywhy的专栏
11-27 201
網上看到的凍結Table列的代碼，是通過兩個Table來實現。現有一個第三方控件包jsuit，有jpvTableView控件，可以實現凍結的功能，但是沒有凍結表頭。   importjava.awt.BorderLayout; importjava.awt.event.WindowAdapter; importjava.awt.event.WindowEvent; impo...
jtable冻结列
jacke121的专栏
06-18 2542
jtable冻结列
JTable的列冻结 --------陈开源
陈开源的专栏
06-05 1566
JScrollPane有以下两个方法setColumnHeaderView(Component view) setRowHeaderView(Component view) 你可以利用它们, 一个用来显示表行头,一个用来显示列头
jquery 动态的把table左边列表固定不动，右边可上下滑动。
num001的博客
01-31 7804
function FixTable(TableID, FixColumnNumber, width, height) {     if ($("#" + TableID + "_tableLayout").length != 0) {         $("#" + TableID + "_tableLayout").before($("#" + TableID));         $("
jQuery实现冻结表格行和列
10-24
针对冻结行、列和行列都冻结的情况，需要创建不同的div。例如，`_tableHead`用于存放冻结的行，`_tableColumn`用于存放冻结的列，而`_tableFix`用于存放同时冻结的行和列。这些div需要设置适当的`z-index`属性以...
table的行列冻结、行冻结、列冻结
06-13
本主题主要围绕"table的行列冻结、行冻结、列冻结"展开，讲解如何使用jQuery实现这一功能，并确保其在主流浏览器上的兼容性。 首先，"行列冻结"是指在表格中固定特定的行和列，即使在用户滚动页面时，这些行和列也...
bootstraptable冻结列例子.doc
01-14
总结来说，Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数，使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数，你可以根据需求定制出...
QT Tabwidget 冻结表头和冻结列
05-25
在"漫步繁华街"-...同时进行了抽象，提取，封装了一个独立的类，可以直接使用，只需要设定表头数据，内容数据，冻结列数据以及各个的颜色即可。 在这里感谢【漫步繁华街】的代码分享。
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
基于jquery的冻结行冻结列插件，可以支持复合表头，对原业务代码侵入较小，非常适合需要实现固定行列对table场景
jquery 冻结行列
07-23
jquery冻结Table行列详细Demo
jquery实现table的冻结列
vicky_lxw的博客
08-04 1780
new document     src="http://code.jquery.com/jquery-1.6.1.min.js">     function FixTable(TableID, FixColumnNumber, width, height) {              $("#" + TableID).after("");              $(
html中表格table冻结行和列
上善若水，道法自然
06-09 7280
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;完美冻结列和行 &lt;/title&gt; &lt;style type="text/css"&gt; .FixedHeaderColumnsTableDiv {
element表格固定某一行_ElementUI Table 首行固定
weixin_39603598的博客
12-19 6804
需求描述：首行固定，吸附在表头下，数据多时其他行可以纵向滚动方案一 两个表格拼凑第一个表格展示头部和固定行 第二个表格展示其它数据 示意图如下优点：固定行数没有限制缺点：适用场景，仅横向 纵向均无滚动条时可用若有横向滚动条，两个表格的滚动条是分开的，会出现滚动A B不动，或滚动B A不动的情况，Windows下会展示两个横向滚动条，不美观若有纵向滚动条，在Windows下滚动条是默认有宽度的，...
element table改指定行、列或单元格的样式
热门推荐
前端攻城狮
08-31 2万+
如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式，可以通过以下方式实现 例如，要求表格第一列 ，左内边距 40px 通过设置 el-table的cell-style、header-cell-style 实现，element 官网 有如下介绍 首先，首先先写好回调方法，因为在项目的 多个地方会用到这个逻辑，所以，我将这个方法放到js文件中， 用混合 (m...
vue table 固定首列和首行
weixin_42610770的博客
05-27 815
vue table 固定首列和首行
JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】
charlatans的博客
08-12 3640
本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中。实现逻辑：表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚动事件进行绑定，让表头和列头显示对应的内容就完成了滚动的操作】下面有Vue组件的和JavaScript原生的代码，可以直接运行查看逻辑和效果。.........
jQuery实现表格冻结行和列
Allec Cui的博客
06-19 1万+
前几天，遇到一个需求是要将表格的前几行和前几列冻结即固定，就是在有滚动条的情况下，保持那几行和那几列固定，这个需求其实是一个非常常见的需求，因为在涉及好多行和列时，在拖动滚动条时，我们需要知道每行每列表示的是什么意思，当被遮挡后，就很难记住是表示的什么内容了，如下图所示：我想要保持学生姓名和在线状态保持不动，以及前三行表示章节以及微课习题的内容保持不变，当然在easyui或者其他的一些插件里这种特
bootstrap-table 冻结首行首列
最新发布
12-28
总的来说，通过以上步骤，可以很容易地在 bootstrap-table 中实现冻结首行首列的效果，使得表格在滚动时仍然能保持首行首列的固定显示。这样可以提高表格的可读性和使用体验，让用户更方便地查看和操作表格数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值