动态匹配文本框宽度与gridview

Question

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

值来自：

• 黑色 = 代码宽度
• 红色 = 通过检查元素 (firefox) 确定的文本框宽度
• 蓝色 = 通过检查元素 (firefox) 确定的表头宽度

这是脚本和样式：

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