动态匹配文本框宽度和gridview

Question

我正在尝试动态调整大量文本框的大小，以便它们匹配我的gridviews表头宽度。 gridview将始终具有相同数量的列，但它们的宽度可能不同。正如您在图像上看到的那样，宽度值根本不匹配。

价值来自：

• black =代码
的宽度
• red =通过检查元素（firefox）
的文本框宽度
• blue =通过检查元素（firefox）
的表头宽度

这是脚本＆amp;式：

<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%;
}