Posted by: dotnetter | May 22, 2008

GridView always emits border-collapse

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…


Responses

  1. 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

  2. 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!

  3. pranay, thanks for the solution… solves my problem…

  4. After a couple of hours working on this detail … I found your simple and great post!!!
    Thanks ….


Leave a comment

Categories