表格中的文本框超过 100% 宽度（仅限 IE）答案

【问题标题】：Textbox within table grows beyond 100% width (IE only)表格中的文本框超过 100% 宽度（仅限 IE）
【发布时间】：2009-08-06 19:16:03
【问题描述】：

我有一个带有一些 BoundFields 和 TemplateFields 的 GridView 控件（呈现到表、tr、td）。本质上，我显示两列，应用程序名称和注释（作为文本框），我想要 35%、65% 的相对宽度。这是我的 asp.net 标记：

<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 中，overflow:hidden 似乎工作）。

所以，我开始使用 CSS 来尝试修复 IE 中的错误，但现在，它不仅仍然溢出，而且我的列宽不再符合 36/65 设置。

【问题讨论】：

标签： asp.net css

【解决方案1】：

在使用 jQuery 之前，先试试这个。我通过谷歌搜索“ie overflow:hidden table cell”找到了它。

How to prevent HTML tables from becoming too wide

对样式使用 Javascript 通常不是一个好主意，尤其是在产品生命周期的后期，另一个开发人员出现并想要添加一个列时。同意，有时一起破解解决方案在短期内感觉更好，但它只会在未来导致头疼。

【讨论】：

非常感谢您的链接... table-layout:fixed 确实似乎做了一些事情...所以现在看来文本框本身的很大一部分是隐藏的，而不是包含的文本本身隐藏（就像最初进入时的行为一样）......所以看起来这可能是正确的第一步。我仍然想研究蛮力方式，因为它似乎更安全，尽管不推荐。 :)
看来这解决了溢出问题，但列宽仍然不起作用。上帝，我爱 CSS！
这个页面是否存在于任何我可以弄乱它的地方？即使是 HTML 的快照而不是实时站点也可以。
很遗憾没有。我认为问题的一部分是在 CSS 愚蠢之上的 ASP 愚蠢。我想我已经解决了宽度问题，必须使用 HeaderStyle-Width="25%"。 ItemStyle-Width （似乎）被忽略了。
关于表格布局的问题...这是一个相当晦涩的 CSS 设置吗？我以前从未使用过它。一个人只在硬敲门的学校里学到这些东西吗？像这样的文章：sweatte.wordpress.com/css-tips 确实让人觉得就是这样……因此我想尝试暴力破解。

【解决方案2】：

刚刚自己解决了这个问题，然后我就摔倒了……

将文档类型定义更改为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

但要注意页面的其他部分不要开始跳来跳去。

【讨论】：