グリッドビューの幅と位置合わせ

Question

固定ヘッダーテーブルとグリッドビューコントロールがあります。私は各列の下にある各列の見出しを修正するために多くの努力をしましたが、成功することはできませんでした。調べると、ヘッダIDの幅が50pxで正しいことがわかります。しかし、それは間違っているboundfield EmpIDの幅66pxを示しています。同様に、Employeeヘッダーのヘッダーは150pxが正しいが、boundfield EmpNameが200pxを示していることを示します。どのように幅を修正し、ヘッダーとgridviewの結果と各列を整列するには？

<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; 
} 

Answer 1

たぶん、テーブルのセルを追加いくつかのパディングやマージンを持って、この

<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 class="col-lg-4" style="text-align:left;width: 50px"> 
      <span>ID</span> 
     </td> 
     <td class="col-lg-4" style="text-align:left;width: 150px"> 
      <span>Employee</span> 
     </td> 
    </tr> 
<tr> 
<td> 
    <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> 
    </Columns> 
    <RowStyle BackColor="White" ForeColor="#333333" /> 
    </asp:GridView> 
    </div> 
     </td> 
       <td> 
     <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="EmpName"> 
      <ItemStyle CssClass="RowStyle150"></ItemStyle> 
     </asp:BoundField> 
    </Columns> 
    <RowStyle BackColor="White" ForeColor="#333333" /> 
    </asp:GridView> 
    </div> 
     </td> 
</tr> 
</table> 
</div>