Alignment of fixed header to datgrid is different in different browser

[rhishi20]

I am doing a asp project. In that i have fixed header of grid view. it looks perfect in internet explorer but when i open that page in mozilla or google chrome alignment of fixed gridview header and gridview changes. also in firefox datagrid cell's text color spreads over border it's not happening with chrome or IE but firefox doing this. please tell me how do i achieve browser compatibility in this case.

 

 

Thanks,

Rhishikesh Chogale

 

following is the way i have done header fixing of gridview

 

<table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF; border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px; width: 100%;"> <tr style="background-color:#000000 "> <td align="center" style="width:08%;"> <font color="#dddddd"> Assembly </font> </td> <td align="center" style="width:13%;" > <font color="#dddddd"> AssemblyName </font> </td> <td align="center" style="width:08%;"> <font color="#dddddd"> Source </font> </td> <td align="center" style="width:13%;"> <font color="#dddddd"> Operators </font> </td> <td style="width:04%;" > <font color="#dddddd"> Hours </font> </td> <td style="width:04%;"> <font color="#dddddd"> Start Date </font> </td> <td style="width:04%;"> <font color="#dddddd"> End Date </font> </td> <td align="center" style="width:17%;"> <font color="#dddddd"> Operators </font> </td> <td style="width:04%;"> <font color="#dddddd"> Hours </font> </td> <td style="width:04%;" > <font color="#dddddd"> Start Date </font> </td> <td style="width:04%;"> <font color="#dddddd"> End Date </font> </td> <td style="width:04%;" > <font color="#dddddd"> Shortfall </font> </td> <td style="width:03%;"> <font color="#dddddd"> Rack </font> </td> <td align="center" style="width:10%;"> <font color="#dddddd"> Remark </font> </td> </tr> </table>

 

And following is the way i have fixed size of gridview by vb.net

 

Protected Sub GridView2_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView2.RowDataBound

 

If e.Row.RowType = DataControlRowType.Header Then Dim cell As TableCell = e.Row.Cells(0) cell.Width = New Unit("08%") Dim cell1 As TableCell = e.Row.Cells(1) cell1.Width = New Unit("13%") Dim cell2 As TableCell = e.Row.Cells(2) cell2.Width = New Unit("08%") Dim cell3 As TableCell = e.Row.Cells(3) cell3.Width = New Unit("13%") Dim cell4 As TableCell = e.Row.Cells(4) cell4.Width = New Unit("04%") Dim cell5 As TableCell = e.Row.Cells(5) cell5.Width = New Unit("04%") Dim cell6 As TableCell = e.Row.Cells(6) cell6.Width = New Unit("04%") Dim cell7 As TableCell = e.Row.Cells(7) cell7.Width = New Unit("17%") Dim cell8 As TableCell = e.Row.Cells(8) cell8.Width = New Unit("04%") Dim cell9 As TableCell = e.Row.Cells(9) cell9.Width = New Unit("04%") Dim cell10 As TableCell = e.Row.Cells(10) cell10.Width = New Unit("04%") Dim cell11 As TableCell = e.Row.Cells(11) cell11.Width = New Unit("05%") Dim cell12 As TableCell = e.Row.Cells(12) cell12.Width = New Unit("04%") Dim cell13 As TableCell = e.Row.Cells(13) cell13.Width = New Unit("11%") End If End Sub

Edited October 16, 2013 by rhishi20

[justsomeguy]

Are you using 2 tables for that? One to display only the headers, and another for the data? It sounds like the tables aren't the same width. Why not just use a single table? Do you have an example of this online? There might be different CSS styles applied to the 2 tables.