Creating vertical gridlines appears on top of table vertex cells

Question

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

Here is a chart of what it looks like now. I need faint grid lines that move vertically to cross the top of the pink and green stripes.

I tried a simple CSS approach, setting the cell z-index property to 0 and then the z-index table to 1, but that doesn't work (I assume CSS is “CSS overrides CSS cells”).

I use jQuery.corner for rounded cell corners, so this can add extra complexity.

UPDATE 02/13/2012

Currently, these grid lines are empty table cells with a dashed CSS line on the left side. The reason for this is because I tried to make GridLines appear on top, but I couldn’t do this, so my code is actually not trying to do this at the moment. So my question should be, is there any way to do this?

I could not get rounded corners and styles to apply JSFiddle correctly, so I used pastebin, copy the text here into a simple html file and you should get the correct result, similar to the image above - please let me know if it looks different / angles are square.

Note. If you use IE to view the file and use the IE developer tools, it is possible to select table cells that are really useful for this.

Answer 1

I would think that if instead of having the colored cells span multiple cells, you simply color the individual cells, then the grid lines will be saved. I don’t know what your markup looks like, and I would not suggest you use this markup for sure, but here is an example of how it could potentially look: http://jsbin.com/ilinap/edit#html,live

Answer 2

I highly recommend that you provide a live example that we can analyze so that we can give a definite answer. Now, with obvious guessing, your plugin or something like what you use for coloring and rounding seems to apply the above “up” effects to the table itself through the insertion of floating divs, so why the vertical dividers don't show.

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

It's important to understand that this corner plugin distracts magic by adding more elements to the page. In particular, it adds div strips to the element that needs to be cornered, and sets the background color to solid on these stripes to hide the actual corners of the real element . Therefore, if you step back and look at the corner element, think that there are solid colored divs that hide the true square from the corners of the object that you want to change. This will help you understand the inherent limitations of this small plugin. ** It is best suited for rounding block-level elements (divs, paragraph, etc.), and may cause more problems when trying to round inline elements (scrolling, anchors, etc.).

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

So, the following logical question:

1.- Do you design with IE in mind? Should your site be cross-browser compatible?
2. If most users do not use IE, I suggest disabling the plugin and just use the border radius when necessary.

Ultimately, if you want to apply vertical lines over your floating waving plugins, you will need to apply a transparent overlay image on the re-pattern, which then twists your users because they will click on the image, not the table & cell contents below it.

So ... let me know what you want to do, and I will give the best answer.

Answer 3

The best way to do this, in my opinion, is to use a background with a weak line and get it to repeat-x over the rounded corner divs. As long as the grid is always the same size and the background is cropped to an exact pixel, I see no reason why it will not work.

Perhaps you need different backgrounds for different colors. Hope this makes sense.

Answer 4

Place the table in a DIV with position:relative; add another DIV with the "overlay" class after the table with a translucent background, the size of which is the same as the table:

 .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)"; }