表中的文本框增长超过100％的宽度（仅适用于IE） [英] Textbox within table grows beyond 100% width (IE only)

问题描述

我有一个GridView控件（这使得表，TR，TD）与一些绑定列和模板列。从本质上讲，我是显示两列，应用程序名称和注释（如一个TextBox），我想35％，65％的相对宽度。这里是我的asp.net标记：

I have a GridView control (which renders to table, tr, td) with some BoundFields and TemplateFields. Essentially, I am displaying two columns, Application Name and Notes (as a TextBox), and I want 35%, 65% relative widths. Here is my asp.net markup:

<asp:GridView ID="gridRequestedApps" DataSourceID="llbRequestedApplications" runat="server" 
    AutoGenerateColumns="False" 
    DataKeyNames="ComputerID, RequestID"  
    EnableViewState="False" 
    cssclass="xGridview">
    <Columns>
        <asp:BoundField DataField="ComputerID" HeaderText="ID" SortExpression="ComputerID" Visible="False" />
        <asp:BoundField DataField="RequestID" HeaderText="ID" SortExpression="RequestID" Visible="False" />
        <asp:TemplateField HeaderText="Application Name" ItemStyle-Width="35%" ItemStyle-Wrap="false">
            <ItemTemplate><asp:TextBox ID="ApplicationName" runat="server" Text='<%# Bind("ApplicationName") %>' CssClass="input_text"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Notes" ItemStyle-Width="65%">
            <ItemTemplate>
            <div style="width:100%; overflow:hidden">
            <asp:TextBox ID="UserNotes" runat="server" Text='<%# Bind("UserNotes") %>' CssClass="input_text" style="overflow:hidden"></asp:TextBox>
            </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

现在在一个点（比上面显示的略有不同的HTML），我也有工作在35/65相对宽度。不过，我则注意到，如果我把长的文本到文本框中，它的成长水平拉伸其所在表过去的100％的宽度。 （这是在IE7 ....在Firefox中，溢出：隐藏似乎是工作）

Now at one point (with slightly different html than shown above), I did have the 35/65 relative widths working. However, I then noticed that if I put long text into the textbox, it was growing horizontally stretching its containing table past 100% width. (This is in IE7....in Firefox, the overflow:hidden seemed to be working).

于是，我开始用CSS搞乱来尝试解决在IE浏览器的bug，但现在，它不仅仍然溢出，但我的列宽都不再尊重六十五分之三十六设置。

So, I started messing with the CSS to try to fix the bug in IE, but now, not only does it still overflow, but my column widths are no longer respecting the 36/65 settings.

推荐答案

jQuery的之前，先试试这个。我发现它通过谷歌搜索，即溢出：隐藏表格单元格

Before jQuery, try this first. I found it by googling "ie overflow:hidden table cell".

<一个href=\"http://www.456bereastreet.com/archive/200704/how%5Fto%5F$p$pvent%5Fhtml%5Ftables%5Ffrom%5Fbecoming%5Ftoo%5Fwide/\"相对=nofollow>如何美元，成为太宽 p $ pvent HTML表格

How to prevent HTML tables from becoming too wide

使用JavaScript的方式通常不是个好主意，尤其是如果以后在产品的生命另一个开发走来，想，说，添加一列。同意，有时黑客的解决方案一起感受在短期内更好，但它只能导致在未来的头痛。

Using Javascript for styles usually isn't a good idea, especially if later on in the product's life another developer comes along and wants to, say, add a column. Agreed, sometimes hacking a solution together feels nicer in the short term, but it can only lead to headaches in the future.

这篇关于表中的文本框增长超过100％的宽度（仅适用于IE）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！