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/