如何將寬度設置為td？

Question

如何將cell phone單詞保持在同一行？

 .label { width: 300px; padding: 5px 15px; } .input { border: 1px solid red; width: 100%; } .input > input { width: calc(100% - 4px); } 

 <form class="frm-find-people"> <table> <tbody> <tr> <td class="label">Cell Phone</td> <td class="input"><input type="text" name="name"></td> </tr> </tbody> </table> </form> 

如您所見，我為該列設置了width: 300px 。 但似乎並不適用。 為什么？

Answer 1

添加white-space: nowrap; 到.label ：

 .label { padding: 5px 15px; white-space: nowrap; } .input { border: 1px solid red; width: 100%; } .input > input { width: calc(100% - 4px); } 

 <form class="frm-find-people"> <table> <tbody> <tr> <td class="label">Cell Phone</td> <td class="input"><input type="text" name="name"></td> </tr> </tbody> </table> </form> 

Answer 2

300px寬度未應用，因為您在下一列具有width:100% ，它告訴它占用盡可能多的空間。

要解決此問題，您必須在下一個td上刪除width:100% 。 而是將其轉移到文本字段。 最后，將整個表格設置為width:100%以便覆蓋整個父表格。 以下是更正后的CSS。

table {
    width: 100%; /* This should be 100% */
}
    .label {
    width: 300px;
    padding: 5px 15px;
}

.input {
    border: 1px solid red;
    /* remove width 100% from here */
}

.input > input {
  width: 100%; /* this should be 100% */
}

Answer 3

您設定.input到width: 100%這是收縮.label下降到可能的最小尺寸（內部的話的長度）

您可以使用CSS .input來使.input 100vw-300px寬

.input {
    width: calc(100vw - 300px);
}

和

.input > input {
  width: calc(100vw - 300px);
}

 .label { padding: 5px 15px; border: 1px solid red; width: 300px; } .input { border: 1px solid red; width: calc(100vw - 300px); } .input > input { width: calc(100vw - 300px); } tr { border: 1px solid blue; } 

 <form class="frm-find-people"> <table> <tbody> <tr> <td class="label">Cell Phone</td> <td class="input"><input type="text" name="name"></td> </tr> </tbody> </table> </form> 

Answer 4

使用以下CSS：

桌子{width：100％; } .label {寬度：30％; 填充：5px 15px; } .input {border：1px solid red; 寬度：70％; } .input>輸入{width：calc（100％-4px）; }

Answer 5

您的代碼存在的問題是，您應該具有：

table.mytable {
    width: 100%;
}

因為<td>是<table class="mytable">的子元素。 因此，父元素必須具有設置的大小，才能修改諸如<td>類的子元素。 添加的mytable類是這樣，如果您有其他表，它只會影響該表。