Gridview 宽度和对齐方式答案

【问题标题】：Gridview Width and AlignmentGridview 宽度和对齐方式
【发布时间】：2016-07-10 10:46:30
【问题描述】：

我有固定的标题表和一个 gridview 控件。我尝试了很多来修复每列下的每个列标题，但未能成功。当我在检查中看到时，它显示标题 ID 宽度为 50px，这是正确的。但它显示 boundfield EmpID width 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;
}

【问题讨论】：

也许表格单元格添加了一些填充或边距？因为当我尝试您的示例时，它可以正常工作。
它不适合我。你能分享你做了什么
我什么都没做我只是复制了你的例子。可能你有一些其他的 CSS 或者我有一些。我使用了 Web 表单示例项目表单 VS 2015。

标签： html css asp.net gridview

【解决方案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>

【讨论】：

我刚刚给出了如何做的想法......并且还根据您的要求进行类更改