在基于表格的布局中div右对齐的问题

Question

我需要对传统的基于web的cms(它具有基于表格的布局)进行一些更改。我只能修改网站的内容区域，它在几个复杂的嵌套表中，但我想我们可以假设这里只有一个表。

给出下面的(简化)代码，在IE6和IE7中是否可以在最右边显示ABC ?

<table>
  <tr>
    <td style="width:200px; border:solid 1px black;">
      <!-- can only make changes inside here -->
      <div style="border:solid 1px red; text-align:right;">ABC</div>
      <input style="width:300px;" value="DEF">
    </td>
  </tr>
</table>

<input>标记表示的内容可能比表格单元格的预设宽度长。在IE8或其他现代浏览器中，div可以展开以匹配输入。但在IE6和IE7中，我似乎不能让它扩展超过200px只用css。我试过使用浮动，宽度，相对位置等。同样，我不能删除200px宽度声明或对表格结构进行任何其他更改。

有人知道怎么做吗?谢谢你。

Answer 1

如果您可以改变单元格内部的结构，您可以将所有内容包装在具有float:left(或right，或inline-block)的div中，因此它将扩展为如下内容:http://jsfiddle.net/kizu/AkVqS/

如果不能包装input部分，可以使用只运行一次的表达式(这样就不会导致任何性能问题):http://jsfiddle.net/AkVqS/2/