CSS：2列表，如何使一列盡可能小但不換行，而另一列盡可能大？

Question

我有兩列表（寬度：100％）。 我希望第一列盡可能小，但文本不應換行。 另一列應盡可能大。

<table style="width:100%">
    <tr>
        <td>Some example text:</td>
        <td><input type=text/></td>
    </tr>
</table>

任何想法？

Answer 1

這樣的事情應該可以解決問題：

td:first-child {
    white-space: nowrap;
}
td:last-child {
    width: 100%;
}

http://jsfiddle.net/m1vtendt/

Answer 2

您需要將兩個CSS規則應用於第一個單元格：

white-space: nowrap;
width: 1%;

第一個防止文本換行，第二個使單元格從1％的寬度擴展到內容的寬度。

演示： http ： //jsfiddle.net/zm6L8gzu/2/