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/