2016-03-23 52 views
1

我有固定的表头和一个gridview控件。我尝试了很多工作来修复每列下的每个列标题,但无法成功。当我看到检查时,它显示我的标题ID宽度50px,这是正确的。但它显示绑定域EmpID宽度66px这是错误的。同样,对于标题Employee显示150px是正确的,但对于显示200px的boundfield 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; 
} 
+0

也许表格单元格添加了一些填充或保证金?因为当我尝试你的例子它正常工作。 – Lesmian

+0

它不适合我。你可以分享你做的事吗 – Raja

+0

我什么也没做我只是复制你的例子。也许你有其他的CSS或者也许我有一些。我已经使用网络表单示例项目表格VS 2015. – Lesmian

回答

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> 
+1

我刚刚给出了想法该怎么做......并且还根据您的要求做出班级更改 –

+0

这不起作用 – Raja

+0

你试过了自举班级 –