zoukankan      html  css  js  c++  java
  • 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>

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

    我来自:向东博客
  • 相关阅读:
    遍历数据类型数组方式
    for 循环 和for..in循环遍历数组 的区别
    多个区域内有相同属性名称子元素,同一区域内 操作DOM子集 使用$("选择器",context)方法
    CSS 使用技巧
    JavaScript 动态加载页面 js文件
    angular2环境配置
    在路上●我的年青●逐步前进
    ARM v8-A 系列CPU的MMU隐射分析
    ARM Cortex-A53 Cache与内存的映射关系以及Cache的一致性分析
    二维图像的投影和图像重建分析之傅里叶变换法
  • 原文地址:https://www.cnblogs.com/meil/p/2374995.html
Copyright © 2011-2022 走看看