How to align RadGrid cells when using Scrolling and GridLines

Some RadGrid skins feature header cell borders and no ordinary cells borders, or vice versa. Another case is for example the WinXP skin, in which header cells have left and right borders, while ordinary cells have only right borders. All these factors need to be taken into account when writing the CSS. This is so, because RadGrid renders header cells and ordinary cells in two different tables when Scrolling is enabled and UseStaticHeaders is set to "True". In general, cells with no or less side borders should have larger side padding, so that the widths of the header cells and ordinary cells remain equal.

By default, GridLines is set to "None" and all CSS skins have been designed with this idea in mind. However, when the GridLines property is set to "Vertical" or "Both", additional borders occur, which cause cell misalignment. For a number of reasons, we do not recommend using the GridLines property anymore, but if you prefer using it, this is how to fix the column misalignment issue.

Let us take the Office2007 skin as an example. Here is how the grid looks like with GridLines="None". There are no header cell borders, but the ordinary cells have right borders.





These are the CSS rules setting side paddings:


.MasterTable_Office2007  th
{
   padding: 0 5px 0 4px;
}
.MasterTable_Office2007  td
{
    padding: 0 4px 0 4px;
}


Here is how it looks like with GridLines="Vertical". All cells now have side borders and there is a misalignment due to the different side paddings.





When GridLines are turned on, cell side paddings should be equal in order to make the cells align properly:


.MasterTable_Office2007  th
{
    padding: 0 4px 0 4px;
}
.MasterTable_Office2007  td
{
    padding: 0 4px 0 4px;
}


This is the grid after fixing the paddings:





By the way, the misalignment issue occurs only in Internet Explorer, not in Firefox or Opera.