動態匹配文本框的寬度與gridview

Question

我想動態調整一些文本框的大小，以便它們匹配我的gridviews tableheads寬度。 gridview將總是有相同的列數，但它們的寬度可能會有所不同。正如您在圖像上看到的那樣，寬度值根本不匹配。

的值來源於：

• 黑色=寬度從代碼
• 紅色=通過檢查元件文本框的寬度（火狐）
• 藍色=通過檢查元件（火狐）
tablehead的寬度

這裏的腳本&風格：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#<%= myGridView.ClientID %> th").each(function (index) { 
      $('input[type="text"]:eq(' + index + ')').css('width', $(this).width()); 
      $('input[type="text"]:eq(' + index + ')').css('padding', '0'); 
      $('input[type="text"]:eq(' + index + ')').val($(this).width()); 
     }); 
    }); 
</script> 
<style type="text/css"> 
    input[type="text"] { 
     margin: 0; 
    } 
</style> 

按照要求，我的ASP代碼

<input type="text" id="id0"/><!-- Comments are needed to get rid of whitespace between text boxes 
     --><input type="text" id="id1"/><!-- 
     --><input type="text" id="id2"/><!-- 
     --><input type="text" id="id3" /><!-- 
     --><input type="text" id="id4" /><!-- 
     --><input type="text" id="id5" /><!-- 
     --><input type="text" id="id6" /> 
      <br /> 
      <asp:GridView ID="myGridView" runat="server" 
       HeaderStyle-CssClass="GridHeader" PagerStyle-CssClass="GridPager" FooterStyle-CssClass="GridFooter" 
       AlternatingRowStyle-CssClass ="GridAltItem" CssClass="Grid" ShowFooter="True" 
       AutoGenerateColumns="false" AllowSorting="True" DataSourceID="myDataSource" 
       OnRowUpdating="myGridView_RowUpdating"> 
       <Columns> 
        <asp:BoundField DataField="1" HeaderText="1" SortExpression="1" ReadOnly="True" /> 
        <asp:BoundField DataField="2" HeaderText="2" SortExpression="2" /> 
        <asp:BoundField DataField="3" HeaderText="3" SortExpression="3" /> 
        <asp:BoundField DataField="4" HeaderText="4" SortExpression="4" /> 
        <asp:BoundField DataField="5" HeaderText="5" SortExpression="5" /> 
        <asp:BoundField DataField="6" HeaderText="6" SortExpression="6" /> 
        <asp:BoundField DataField="7" HeaderText="7" SortExpression="7" /> 
        <asp:commandfield showeditbutton="True" /> 
        <asp:commandfield showdeletebutton="True" /> 
       </Columns> 
       <FooterStyle CssClass="GridFooter"></FooterStyle> 
       <PagerStyle CssClass="GridPager"></PagerStyle> 
       <HeaderStyle CssClass="GridHeader"></HeaderStyle> 
       <AlternatingRowStyle CssClass="GridAltItem"></AlternatingRowStyle> 
      </asp:GridView> 

Answer 1

我認爲僅此一點就足以

input[type="text"] { 
    margin: 0; 
    width: 100%; 
}