html - 如何使按钮和输入保持在表格单元格内的同一行？

Question

给定:

<table>
<tr>
    <td>
        <div id="dv">
            <button id="bt" type="button">X</button>
            <input id="num" type="number" value="1"/>
        </div>
    </td>
    <td>
        <input type="text" value="aaa"/>
    </td>
</tr>
</table>​

http://jsfiddle.net/mark69_fnd/ZZFc5/1/

但是，如果我调整窗口大小，则会得到:

我想实现的是:

1. 即使调整窗口大小时，所有控件都位于同一行。
2. 输入控件占据所有可用空间(按钮大小可以保持不变)。
3. 调整窗口大小时，输入控件的大小也会随之调整。
4. X 按钮必须与输入控件共享第一个单元格。
5. 不应使用绝对尺寸，X 按钮除外。

这应该很简单，但我就是无法理解它。

请分享您的智慧。

编辑

如果可能，我想避免为所有指定绝对值(如像素)，但 X 按钮除外，它可能被指定绝对宽度和高度。

EDIT2

添加了第 5 个约束。

Answer 1

< nobr > is your friend here

<table>
<tr>
    <td>
        <div id="dv">
          <nobr>
            <button id="bt" type="button">X</button>
            <input id="num" type="number" value="1"/>
          </nobr>
        </div>
    </td>
    <td>
        <input type="text" value="aaa"/>
    </td>
</tr>
</table>

http://jsfiddle.net/mXSgd/

对于实际可调整大小的表单元素，这可能会有所帮助:

http://dev.sencha.com/deploy/ext-4.0.0/examples/form/anchoring.html

或者这个:

http://www.switchonthecode.com/tutorials/javascript-tutorial-resizeable-textboxes