Question

我正在使用以下代码

---编辑@annakata：添加完整代码

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>

 <BODY>
  <table id="additionalContactsTable" name="additionalContactsTable"
                                        width="100%"
                                >
                                        <thead>
                                                <tr>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Last</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>First</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Middle</b> </th>
                                                        <th style="text-align: center" class="Ntablerow1RightDark" width="25%"><b>Email</b> </th>
                                                <tr>
                                        </thead>
                                        <tbody>

                                                <tr>

<td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > </td>
        <td class="NcontextlabelboldNormal" height="24">  <input maxlength="256"
        type="text" name="additionalContact" style="width: 90%;"
        value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > </td>

 </BODY>
</HTML>

当用户输入大文本，文本框展开并且表格失真时，会出现问题。如果我把size =“30”放在那里，扩展问题是固定的，但在不同的分辨率下，结构表现不同。

任何修复或周围的工作都可以优雅地实现目标？

Answer 1

好吧，我现在可以清楚地看到这在IE中复制了。

它似乎是IE中的一个错误（IE有百分比的臭名昭着的问题）依赖于以下情况：

输入在表格中
并且输入的大小为百分比
并且输入具有超出宽度

因此存在一些明显的解决方法：

将输入置于浮动<div>布局中（如果语义正确，我会这样做）
尺寸宽度，以em（最好）或px为单位（如果您的设计能够负担得起）
在加载后使用客户端脚本注入值（这是一个糟糕的解决方案，不这样做）

以及一个非显而易见的解决方法，如果您需要表和百分比，我建议使用

仅限IE的CSS规则width: expression(this.parentNode.offsetWidth*0.9);

希望这有帮助。

（先前的答案请求删除代码）

编辑基于您的示例的代码段，适用于IE + FF

<style>
/* table method */
table {width: 100%;}
th {width: 25%; text-align: center; font-weight: 700;}
td {height: 24px; width: 25%;}
td input {overflow: hidden; width: 90%; }
/* IE only correction */
* html td input {width: expression(this.parentNode.offsetWidth*0.9);}

/* float method */
#foo {width: 100%;background:blue;}
#foo div {float:left; width: 25%;}
#foo div  input {width: 90%;}
 </style>

<table>
    <thead>
            <tr>
                    <th>Last</th>
                    <th>First</th>
                    <th>Middle</th>
                    <th>Email</th>
            <tr>
    </thead>
    <tbody>
            <tr>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" /> 
                </td>
                <td>
                    <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" /> 
                </td>
            </tr>
    </tbody>
</table>

<div id="foo">
    <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaaaaaaaaaaaaaaaa" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaaaaaa aaaaaaaa aaaaaaaaaab bbbbbbbb bbbbbbbbbbbbbbbb" > 
    </div>
            <div>
        <input maxlength="256" type="text" name="additionalContact" value="aaaaaaaa  aaaaaa aaaaaaa aaaaa" > 
    </div>
</div>

Answer 2

我使用以下代码来解决此问题

...
<td width="100%">
  <table style="table-layout:fixed;width:100%">
    <tr>
      <td style="padding-right:7px;">
        <input style="width:100%;" type="text"/>
      </td>
    </tr>
  </table>
</td>
...

Answer 3

刚刚解决了这个问题，我只是摔倒了......

将文档类型定义更改为

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

但请注意页面的其他部分不会开始跳转。

Answer 4

使用

CSS规则宽度：表达式（this.parentNode.offsetWidth * 0.9）;解决了我的问题..宾果!!

列扩展为表中的“以百分比给出的文本框宽度”

4 个答案: