2016-03-23 91 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

你試過了自舉班級 –