Well, this one cost me about an hour to find a solution.
In the application I’m currently working on the table cells have only bottom borders and between them there’s a gap (no continuous line). Today I added a GridView to the page and applied the usual css classes. I was surprised to see the borders were a solid line from the left cell to the most right one.
Because having the same style on all pages is important in webapplications, I had to find a solution. Fired up the developer toolbar and looked at the applied styles. Surprise: there’s an entry “border-collapse:collapse”. My first idea: control the rendering of the element (in several stages RenderContents(), OnPreRender() etc) and remove all styles. The count of styles returned 0 but the border-collapse was still there. Next solution: set the GridLines attibute to “None”. Still no luck.
Manipulating the styles with the developer toolbar, I could remove the entries and have the expected look. Something strange happens here… Ok, time to Google for a solution. Literally twenty seconds later I found this post by someone who had the exact same problem.
The solution? Plain and simple: set GridLines to None and CellSpacing to -1. Forget to do one and you won’t get there. Microsoft logic I guess…
There are some scenarios where you may need to manually specify cellspacing=”0″.
I found another way to deal with this issue (Using CSS)
Assign the gridview a css class and then force this in it using !important
.gridviewclass
{
border-collapse:separate !important;
}
This would override the border-collapse tag from asp.net
By: Pranay Sharma on February 27, 2011
at 6:02 pm
Dotnetter and Pranay, you are my heroes! What a hack but it works. I would’ve never thought to use this to fix my problem. The automatically assigned (and unremovable) attributes Rules=”All” and Style=”border-collapse:collapse” were causing my cell bottom borders to overlap my table’s left border in each row of the gridview. I was pulling my hair out trying to figure out how to translate my beautiful, perfectly designed html/css table into a gridview control with exactly the same rendering after applying CSS. Thanks to you guys, now my gridview is rendering exactly the same as what I originally designed. Cheers!
By: Danny K. on March 16, 2011
at 6:45 pm
pranay, thanks for the solution… solves my problem…
By: jeff on January 17, 2012
at 6:10 am
After a couple of hours working on this detail … I found your simple and great post!!!
Thanks ….
By: LorenzoP on February 26, 2012
at 3:11 pm