Making vertical GridLines appear over the top of spanned table cells

Question

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.

Answer 1

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

Answer 2

I strongly suggest you provide a live example we can analyze so that we can provide a definite answer. Now, with sheer guessing, your plugin or whatever it seems you're using to colour and round things up seems to be applying said effects 'above' the table itself through the insertion of floating divs, hence why the vertical dividers are not showing through.

Ok, I went into the jquery round corners page you provided and what I just said above is basically how the plugin works, here, by their own definition:

It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item. So if you step back and look at the cornered element, think of there being solid colored divs hiding the true squared off corners of the item you wish to be changed. This helps you understand the inherent limitation**s of this small plugin. **It's best suited for rounding off block-level elements (divs, paragraphs, etc) and may present more challenges when trying to round off inline elements (spans, anchors, etc).

Recently I added support for native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property on the element. But in IE, we'll have to wait for version 9 before that is supported. And for all browsers, choosing a pattern other than "round" requires the use of the "div stips" method.

So the next logical question is:

1.- Are you designing with IE in mind? Is your site meant to be cross-browser compatible?
2.- If the majority of your users are not utilizing IE, then I suggest ditching the plugin and just using border-radius whenever needed.

Ultimately, if you want to apply the vertical lines over your plugin's flying divs, you will need to apply a repeat-pattern overlay transparent image, which then screws your users because they will be clicking the image and not the table&cell content beneath it.

So... let me know what you want to do and I'll provide a better answer.

Answer 3

Best way to do this in my opinion is to use a background with the faint line, and get it to repeat-x over the rounded corner divs. As long as the grid is always the same size & the background is cut to the exact pixel, I don't see a reason it wouldn't work.

Perhaps you need different backgrounds for different colours too. Hope it makes sense.