html - 将表格 td 的宽度设置为与其内容相同

Question

如何在不改变表格行为的情况下将 table td 的宽度设置为与其内容相同。

我希望表格具有 100% 的宽度，但表格 td 往往会扩展。见下图。

然后我尝试添加 td style = "width:120px" 并且我得到了我想要的标签和输入字段的结果，就像彼此不远离一样，见下图. 为了获得我想要的结果，我是否需要为 table td 定义宽度，或者是否有任何没有硬编码宽度的简单方法？所以如果我有另一个带有长标签的表，例如 Another long label One: ，我就不必为它的 table td 设置另一个大约 300px。非常感谢任何帮助。

另见 Fiddle演示

Answer 1

您可以像下面那样做，以确保第 2 列始终获得可用的最大宽度。

table {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
}
table td {
    border: 1px solid green;
}
table td:last-child {
    width: 100%;
}

http://jsfiddle.net/nmwpqznk/1/