如何将宽度设置为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类是这样，如果您有其他表，它只会影响该表。