title: Making vertical GridLines appear over the top of spanned table cells
body: <p>I'm developing an ASP.Net project.  I have an <code>&lt;asp:Table&gt;</code> control on my page, to which columns and cells are added from codebehind.  Many of the cells span across more than one column.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/8qVgt.png" alt="enter image description here">
  I've tried a simple CSS approach of setting the cells <code>z-index</code>  property to 0 and then the the tables <code>z-index</code> to 1, but this doesn't work (I'm assuming the tables' CSS overrides the cells' CSS).</p>
  
  <p>I am using <a href="http://jquery.malsup.com/corner/" rel="nofollow noreferrer">jQuery.corner</a> for the rounded corners of the cells so this may be adding further complexity.</p>
  
  <p><strong>UPDATE 13/02/2012</strong></p>
  
  <p>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 <em>tried</em> 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?  </p>
  
  <p>I couldn't get the rounded corners and styles to apply properly on JSFiddle so I used pastebin, please copy the text <a href="http://pastebin.com/8mSQ2MxD" rel="nofollow noreferrer">here</a> 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.</p>
  
  <p>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.</p>