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.
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).
I am using jQuery.corner for the rounded corners of the cells so this may be adding further complexity.
UPDATE 13/02/2012
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?
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.
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.
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