html - Gridview 宽度和对齐方式

Question

我有固定的标题表和一个 gridview 控件。我尝试了很多来修复每一列下的每一列标题，但没有成功。当我在检查中看到时，它显示标题 ID 宽度 50px 是正确的。但它显示边界字段 EmpID 宽度 66px，这是错误的。同样，对于标题 Employee 显示 150px 是正确的，但对于显示 200px 的边界字段 EmpName。如何固定宽度并将每列与标题和 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>