設置表td的寬度與其內容相同

Question

如何在不更改表行為的情況下將表table td的寬度設置為其內容的寬度。

我希望表格具有100％的寬度，但表格td傾向於擴展。 參見下圖。

然后我嘗試添加td style = "width:120px"並且我想要的標簽和輸入字段結果不至於彼此相距不遠，請參見下圖。 為了得到想要的結果，我是否需要為table td定義寬度，或者是否有沒有硬編碼寬度的簡單方法？ 因此，在我有另一個帶有長標簽的表的情況下，例如Another long label One: ：，我不必為其table td設置另一個大約300px的位置。 非常感謝任何幫助。

另請參閱小提琴演示

Answer 1

您可以按照以下方式進行操作，以確保第二列始終獲得可用的最大寬度。

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/

Answer 2

使用width:"auto"代替。

它會根據內容自動適合。

Answer 3

如果寬度：“自動”對您不起作用。

嘗試將另一對<td></td>到表中的每個<tr></tr>並將其添加到CSS中，例如

table td {
min-width : 160px;
}

JSFiddle演示