如何使一個按鈕和一個輸入保持在表格單元格的同一行上？

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按鈕外不應使用絕對尺寸。

這應該是簡單的，但我不能得到我的頭。

請分享你的智慧。

EDIT

如果可能，我想避免對所有指定的絕對值（如像素），但X按鈕，其可被給定的絕對寬度和高度。

EDIT2

新增的第5約束。

Answer 1

如果可以貼在桌子的寬度等100%，則可以嘗試如下所示。

我修改了您的HTML以在文本字段中添加一個id;而已。

HTML：

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

CSS：

table { 
    width: 100%; 
} 
tr td { 
    position: relative; 
    width: 50%; 
} 

#bt { 
    width: 25px; 
    top: 0; 
    left: 0; 
    position: absolute; 
} 

button { 
    padding: 0; 
    margin: 0; 
} 

#num { 
    position: absolute; 
    top: 0; 
    left: 25px; 
    right: 0; 
} 

#txt { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

見the JSFiddle I forked from yours。

基本上我將按鈕的大小設置爲25px，然後將每個<td> s的寬度設置爲表格寬度的50％。然後我使用絕對定位來告訴文本字段和輸入字段佔用所有可用的水平空間，而沒有其他東西。因此，在調整窗口大小時，組件將調整大小，但不會「放」到第二行。

Answer 2

< NOBR>是你的朋友在這裏

<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

Answer 3

在該靜脈，可以設置一個最小寬度到容器（或兒童），其在該實例中是該表中，見下文。或者以百分比重置表格並使其變得靈活而又可控。

<table style="min-width:300px"> 

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

你可以溝表方法和使用CSS浮於表

Answer 4

設置樣式可能可以幫助你。

表{寬度：200像素;}
表TR TD {寬度：30％;}

http://jsfiddle.net/ZZFc5/2/