I have been attempting to fix the alignment of each column in my fixed header table and gridview control without success. Inspecting the elements revealed that the header ID width is set correctly at 50px, but the boundfield EmpID width is incorrect at 66px. Additionally, the header for Employee displays a correct width of 150px, while the boundfield EmpName shows 200px. How can I resolve this issue and ensure each column aligns properly with the header and gridview results?
<div style="height: 30px; margin: 0; padding: 0">
<table id="tblHeader" class=""
style="background-color: #336666; color: white; border-collapse: collapse; height: 100%;">
<tr>
<td style="text-align:left;width: 50px">
<span>ID</span>
</td>
<td style="text-align:left;width: 150px">
<span>Employee</span>
</td>
</tr>
</table>
</div>
<div style="height: 360px; overflow: auto;">
<asp:GridView ID="grdEmp" runat="server" AutoGenerateColumns="False"
OnRowCommand="grdEmp_RowCommand" ShowHeader="false"
GridLines="None" Font-Size="Small">
<Columns>
<asp:BoundField DataField="EmpID" ItemStyle-Width="50px">
</asp:BoundField>
<asp:BoundField DataField="EmpName">
<ItemStyle CssClass="RowStyle150"></ItemStyle>
</asp:BoundField>
</Columns>
<RowStyle BackColor="White" ForeColor="#333333" />
</asp:GridView>
</div>
.RowStyle50 {
text-align:left;
padding-left: 0px;
padding-right: 0px;
width: 50px !important;
}
.RowStyle150 {
text-align:left;
padding-left: 0px;
padding-right: 0px;
width: 150px !important;
}