使垂直GridLines显示在跨区表格单元格的顶部

时间:2011-06-08 12:17:22

标签: javascript jquery asp.net css html-table

我正在开发一个ASP.Net项目。我的页面上有一个<asp:Table>控件,从代码隐藏中添加了列和单元格。许多单元格跨越多个列。

这是目前看来的图表。我需要垂直延伸的微弱网格线,越过粉红色和绿色条的顶部。

enter image description here 我尝试了一种简单的CSS方法,将单元格z-index属性设置为0,然后将表格z-index设置为1,但这不起作用(我假设表格的CSS覆盖了细胞的CSS。

我使用jQuery.corner作为单元格的圆角,这可能会增加复杂性。

更新13/02/2012

目前,这些网格线实际上是空表格单元格,左侧有CSS虚线边框。这样做的原因是我已经尝试让GridLines出现在顶部,但我无法做到,所以实际上我的代码目前没有尝试这样做。所以我的问题应该是,有办法吗?

我无法在JSFiddle上正确应用圆角和样式,所以我使用了pastebin,请将文本here复制到一个普通的html文件中,你应该得到类似于上图的正确输出 - 如果它看起来不同/角落是正方形,请告诉我。

注意:如果您使用IE查看文件并使用IE开发人员工具,则可以选择概述表格单元格,这对此非常有帮助。

4 个答案:

答案 0 :(得分:3)

我认为如果不是让彩色单元格跨越多个单元格而是为单个单元格着色,那么网格线将被保留。我不知道你的标记是什么样的,我也不建议你准确地使用这个标记,但这里有一个它可能看起来如何的例子:http://jsbin.com/ilinap/edit#html,live

答案 1 :(得分:1)

我强烈建议您提供一个我们可以分析的实例,以便我们提供明确的答案。现在,通过纯粹的猜测,你的插件或你用来着色和圆形的任何东西似乎是通过插入浮动div来在表格本身上方应用所述效果,因此为什么垂直分隔线没有显示出来

好的,我进入了你提供的jquery圆角页面,上面我刚才所说的基本上是插件的工作原理,在这里,按照他们自己的定义:

  

重要的是要理解这个角落插件通过向页面添加更多元素来消除它的魔力。 具体来说,它会将div“条带”添加到要进入角落的项目中,并在这些条带上设置纯色背景颜色,以隐藏真实项目的实际角落。因此,如果您退后一步看看角落元素,请考虑是否有纯色的div隐藏了您希望更改的项目的正方形角。这有助于您了解这个小插件的固有限制**。 **它最适合用于舍入块级元素(div,段落等),而在尝试舍入内联元素(跨度,锚点等)时可能会遇到更多挑战。

     

最近,我在浏览器中添加了对原生 border-radius 舍入的支持   支持它(Opera 10.5 +,Firefox,Safari和Chrome)。所以 in   那些浏览器插件只是在元素上设置一个css属性。   但在IE中,我们必须等待版本9才能支持。   并且适用于所有浏览器,选择“round”以外的模式需要   使用“div stips”方法

所以下一个合乎逻辑的问题是:

1.-您是否考虑过设计IE?您的网站是否与跨浏览器兼容? 2.-如果大多数用户没有使用IE,那么我建议放弃插件,只需要在需要时使用border-radius。

最终,如果你想在你的插件的飞行div上应用垂直线,你需要应用一个重复图案叠加透明图像,然后拧紧你的用户,因为他们将点击图像,而不是表格和单元格它下面的内容。

所以......让我知道你想做什么,我会提供更好的答案。

答案 2 :(得分:1)

在我看来,最好的方法是使用带有模糊线条的背景,并使其在圆角div上重复x。只要网格总是相同的大小&amp;背景被切割成精确的像素,我没有看到它不起作用的原因。

也许你需要不同颜色的不同背景。希望它有意义。

答案 3 :(得分:0)

将表格放入一个DIV,其中position:relative;在具有半透明背景的表格之后添加另一个DIV类别为“overlay”,其大小与表格相同:< / p>

.overlay {
    position:absolute;
    background-image:url(../images/grid.png); <-- you need to make this image
    top:0;
    left:0;
    width: 900px;   <--- set you your table dimensions
    height:900px;   <---
    opacity: .4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}