Main Points

  • Default Inline Styles A recap of the CSS situation for our GridView control.
  • Fighting for Control Why be shy? Attacking into the teeth of the beast, to see how much we're limited by the default gridview attributes.
  • Border Testing Some final testing on manipulating gridview borders.

Default Inline Styles

In implementing a master page based template across the site, this testing page or its dependencies may have been moved. Therefore, some of the references have been changed possibly including master page friendly techniques like application root relative references. They are not original.

[chroniclemaster1, 2008/11/08]

As we saw on the last page, ASP.NET has some less than desirable default behavior when it comes to controlling the appearance of the web page. Preferably, we would liked to have used CSS to control the look of the GridView control. However, .NET uses some default inline styles that interfere with our goal. So why don't we see what we can still manage, shall we? Here's the code we started with last time...

<asp:GridView ID="gvRolesData" runat="server" DataSourceID="adsRolesData"></asp:GridView>
<asp:AccessDataSource ID="adsRolesData" runat="server" DataFile="~/App_Data/ASPNetDB.mdb" SelectCommand="SELECT * FROM [vw_aspnet_Roles]"></asp:AccessDataSource>

This resulted in a basically clean HTML table that included these inline styles.

<table cellspacing="0" rules="all" border="1" id="gvRolesData" style="border-collapse:collapse;">

The cellspacing attribute is old HTML4; it's equivalent to the table cell's CSS margin. It combines with the border-collapse style rule to indicate that there should be no spacing between cells and they should share a border. In this case a 1px border specified by the border attribute, border="1". Now strictly speaking the border attribute specifies the border around the table, but the rules attribute indicates that each table cell should also take a border producing a complete grid. The result of the default style is a table that looks like this.

PatientIDName
1Hotel Calls
2Katy Peril
3Mrs. Roberts
4Mr. Johns
5Kinko's
6Mr. Wilson
7Mrs. Le Calvez
8Mrs. Haversham
9Mr. Grissom
10Bill P.
11Mr. Johnson
12June Beatermeyer
13Nicholas Nickelby
15Willa Cather
16Desiree Cloud
17Bobby McGee
19Minerva Stanley
20Miles Davis
27Asa
28Alex Anderson
29Willie Nelson
30Willie Nelson
31Lisa Biesele
32Dora the Explorer
33Mouse, Mickey
Skip to Main Points

Fighting for Control

Let's take a look at what we can do, if anything, to get back control over the page. Here's our first attempt.

PatientIDName
1Hotel Calls
2Katy Peril
3Mrs. Roberts
4Mr. Johns
5Kinko's
6Mr. Wilson
7Mrs. Le Calvez
8Mrs. Haversham
9Mr. Grissom
10Bill P.
11Mr. Johnson
12June Beatermeyer
13Nicholas Nickelby
15Willa Cather
16Desiree Cloud
17Bobby McGee
19Minerva Stanley
20Miles Davis
27Asa
28Alex Anderson
29Willie Nelson
30Willie Nelson
31Lisa Biesele
32Dora the Explorer
33Mouse, Mickey
#gvRolesTwoData {
border-collapse:separate;
border:4px dotted #FF0000;
}
#gvRolesTwoData table {
border-collapse:separate;
border:2px dashed #00FF00;
}
#gvRolesTwoData tr {
border-collapse:separate;
}
#gvRolesTwoData td {
margin:2px;
padding:0.5em;
border:0.25em solid #0000FF;
border-collapse:separate;
}

I tried my hardest, but I could not reverse the border-collapse style and the cellspacing="0" which eliminates the margins between cells. Setting border-collapse:separate for everything didn't help, nor did explicitly applying a margin to the tables cells. (or anything else for that matter) I can control padding between the borders and their cell contents, but that was it.

However, I had what I thought was phenomenal success with the borders. Despite the fact that the border is defined as width 1 pixel, I could control the width of the cell borders along with their CSS border-style and color. That's much better than I expected. Here I've applied a dotted red border to the #gvRolesData div, remember that a gridview constructs a table, however the table is wrapped in a div which actually has the id of the control. I also applied a green dashed border to the table itself, and a solid blue border to its table cells. Note there was no problem using a mix of px and ems for defining the widths.

Skip to Main Points

Border Testing

Let me go after the rules attribute now. How flexible is this and how easy?

PatientIDName
1Hotel Calls
2Katy Peril
3Mrs. Roberts
4Mr. Johns
5Kinko's
6Mr. Wilson
7Mrs. Le Calvez
8Mrs. Haversham
9Mr. Grissom
10Bill P.
11Mr. Johnson
12June Beatermeyer
13Nicholas Nickelby
15Willa Cather
16Desiree Cloud
17Bobby McGee
19Minerva Stanley
20Miles Davis
27Asa
28Alex Anderson
29Willie Nelson
30Willie Nelson
31Lisa Biesele
32Dora the Explorer
33Mouse, Mickey
#gvRolesThreeData table, #gvRolesThreeData td {
border:0;
}

OK, it doesn't get any easier than that. I can defy both the border="1" and the rules attribute which activates all the interior gridlines. All I needed was one style rule to set the border to width 0. I even wiped out the border around the table with the same style rule. This is so much better than I would have guessed. I can't create margin between the table cells; I suspect the border-collapse forces this because in CSS, an inline style rule like this trumps all other CSS. However everything else, I can basically override and control from the external .css file. Yea!

Skip to Main Points
<-- Back to 1. Displaying Access (.mdb) Database Data
Continue to 3. SQL Server Database Display -->
<---- Jump back to ASP.NET Database Development