I've been building some internal pages for our sales team here at Pluralsight, and many of those pages make use of the ASP.NET GridView control to display rectangular data. It's generally a really easy to use control, but I've always struggled with getting column widths to look right.
My goal is to fix the width of each column at design time, and any field that contains text that may be longer than my fixed width should wrap around, taking up more vertical space in the table. If you are trying to accomplish this goal, you might find these tips helpful.
1) Set up a CssClass for the GridView itself and include the table-layout:fixed style. This tells the browser that you're going to specify the width of each cell. You may also want to include the overall width of the grid here as I mention in (3).
2) The first row of the table sets the width for each cell, and that's usually the HEADER row, not the item row, so use either HeaderStyle-CssClass or HeaderStyle-Width to set the width of the cell. I wasted a lot of time trying to set the width using the ItemStyle.
3) Make certain the table itself is wide enough to hold all of the cells. I added up all of my cell widths and used that to set the width via the CssClass attribute on the GridView.
Using these guidelines, I'm having much better luck controlling the layout of my GridView controls. I hope this simple advise helps someone else!
Posted
Jul 30 2008, 10:23 AM
by
keith-brown