ASP.net中实现双表格同步缩放不变形

项目中有一个表格中需要显示数据，特殊之处在于。表格的数据部需要在本页滚动，而标题头不动。

实现很简单，用两个表格控件并接在一起，一个显示数据标题，一个显示数据，数据表格嵌套在DIV中实现滚动，这样基本就可以实现需求了。

但是这个页面中的表格的列不能固定都是使用百分百来控制，这样就有一个问题及时你在设计的时候保持上下表格的对齐，但是当IE窗体别拉伸的时候上下两个表格就不能保持同步缩放，导致整个表格变形。

下图是这个显示数据的表格效果图

最终，想到的办法就是上下两个表格都放在DIV中，并且都是设置上下滚动条，但是标题部的DIV滚动条使用样式表单控制让其与页面颜色一致（都是白色）。这样无论页面如何拉伸上下两个表格始终保持缩放同步。

下面是实现的代码：（关键的地方在代码的第一行）

 1 <div style="height:13px;overFlow-y:scroll;SCROLLBAR-HIGHLIGHT-COLOR:#FFF;SCROLLBAR-DARKSHADOW-COLOR:#FFF;SCROLLBAR-ARROW-COLOR:#FFF;SCROLLBAR-TRACK-COLOR:#FFF;SCROLLBAR-FACE-COLOR:#FFF;SCROLLBAR-SHADOW-COLOR:#FFF;SCROLLBAR-3DLIGHT-COLOR:#FFF;"> 2         <asp:table id="tbl_title" runat="server" width="100%" borderwidth="1px" cellspacing="0" 3             cellpadding="0"> 4        <asp:TableRow verticalalign="Middle" borderwidth="1px" horizontalalign="Center" forecolor="Black" backcolor="LightCyan" font-size="Smaller" font-bold="True"> 5         <asp:TableCell borderwidth="1px" width="10%" text="列1"></asp:TableCell> 6         <asp:TableCell borderwidth="1px" width="30%" text="列2"></asp:TableCell> 7         <asp:TableCell borderwidth="1px" width="10%" text="列3"></asp:TableCell> 8         <asp:TableCell borderwidth="1px" width="10%" text="列4"></asp:TableCell> 9         <asp:TableCell borderwidth="1px" width="30%" text="列5"></asp:TableCell>10         <asp:TableCell borderwidth="1px" width="10%" text="列6"></asp:TableCell>11        </asp:TableRow>12      </asp:table>13  </div>14  <div id="divDetail" style="height:290px;overFlow-y:scroll;">15         <asp:table id="tblResult" runat="server" width="100%" borderwidth="1px" cellspacing="0"16             cellpadding="0">17      </asp:table>18  </div>

哈哈！办法很笨了，但是想要的效果出来了。欢迎大家拍砖！

ASP.net中实现双表格同步缩放不变形相关推荐

Word中删除双删除线的内容和删除表格中的空白行
这周四开会,发现部门的需求文档里,都是没用的双删除线,完全没有用途,几百页的文档里充斥了这样的垃圾,让我看着很不爽,所以就写了VBA程序来把这些内容删除了,试了试还不错.代码如下: Function ...
vue3项目使用了element-plus中的el-table表格组件，缩放浏览器网页时，报错如下： ResizeObserver loop limit exceeded at eval (w
错误描述: vue3项目使用了element-plus中的el-table表格组件,缩放浏览器网页时,报错如下: ResizeObserver loop limit exceeded at eval ...
MVC架构在Asp.net中的应用和实现
MVC架构在Asp.net中的应用和实现摘要:本文主要论述了MVC架构的原理.优缺点以及MVC所能为Web应用带来的好处.并以"成都市信息化资产管理系统"框架设计为例,详细介绍其 ...
Asp.net中水晶报表的使用
在我们对VS.Net中的水晶报表(Crystal Reports)进行研究之前,我和我朋友对如何将这个复杂的东东加入我们的Web应用有着非常的好奇心.一周以后,在阅读了大量的"HOWTO&q ...
ASP.NET中的AJAX应用开发详解
[IT168 技术文档]其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我 ...
java中的双冒号操作符
java :: Java中的双冒号操作符 </h1><div class="clear"></div><div class="p ...
ASP.NET中的AJAX应用开发总结
11月21日晚7点应邀在武汉大学信息学院做了一场关于ASP.NET下AJAX开发的报告,以我自己经历讲述了一些特殊应用在过去到现在实现手段的变化,本来想回家之后做个总结的,但是由于最近以来事情一直很多 ...
搜集《ASP.NET中常用的26个优化性能方法》
1. 数据库访问性能优化 a.数据库的连接和关闭访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接 ...
html中单双引号嵌套,[转]详细讲述asp中单引号与双引号（即引号多重嵌套）的用法...
1,双引号"" ASP中处在双引号中的可以是任意的字符.字符串,HTML代码. 比如 here")%> ("cnbruce here")%> ...

ASP.net中实现双表格同步缩放不变形

ASP.net中实现双表格同步缩放不变形相关推荐

最新文章

热门文章