使垂直GridLines显示在跨区表格单元格的顶部 [英] Making vertical GridLines appear over the top of spanned table cells

问题描述

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

I'm developing an ASP.Net project. I have an <asp:Table> control on my page, to which columns and cells are added from codebehind. Many of the cells span across more than one column.

这是当前的图表。我需要垂直运行的微弱网格线超过粉红色和绿色条的顶部。

Here is the chart as it looks currently. I need the faint grid lines which run vertically to go over the top of the pink and green bars.

我尝试了一种简单的CSS方法，将单元格 z-index 属性设置为0然后表 z-index 为1，但这不起作用（我假设表的CSS覆盖了单元格的CSS）。

I've tried a simple CSS approach of setting the cells z-index property to 0 and then the the tables z-index to 1, but this doesn't work (I'm assuming the tables' CSS overrides the cells' CSS).

我正在使用 jQuery.corner 进行舍入细胞的角落可能会增加复杂性。

I am using jQuery.corner for the rounded corners of the cells so this may be adding further complexity.

更新13/02/2012

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

Currently those grid lines are actually empty table cells with a CSS dotted border on the left hand side. The reason for this is that I had tried to get the GridLines appearing over the top, but I couldn't do it, so actually my code makes no attempt to do it currently. So my question should be, is there a way to do it?

我无法在JSFiddle上正确应用圆角和样式，所以我使用了pastebin，请复制文本这里进入一个简单的html文件，你应该得到类似于上面图片的正确输出 - 请告诉我它是否看起来不同/角是方形的。

I couldn't get the rounded corners and styles to apply properly on JSFiddle so I used pastebin, please copy the text here into a plain html file and you should get the correct output similar to the picture above - please let me know if it looks different / the corners are square.

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

Note: if you use IE to view the file and use the IE developer tools, there is an option to outline table cells which is really helpful for this.

推荐答案

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

I would think that if instead of having the colored cells span multiple cells you just color the individual cells, then the grid lines would be preserved. I don't know what your markup looks like, and I wouldn't suggest you use this markup exactly, but here's an example of how it would potentially look: http://jsbin.com/ilinap/edit#html,live

这篇关于使垂直GridLines显示在跨区表格单元格的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！