如何将宽度设置为td？

Question

How can I keep cell phone words in the same line?

 .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> 

As you see, I've set width: 300px for that column. But seems it doesn't apply. Why?

Answer 1

Add white-space: nowrap; to .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

the 300px width is not being applied because you have a width:100% on the next column, which tells it to occupy as much space as it can.

To fix that, you have to remove the width:100% on the next td . Transfer that to the text field instead. Finally, set the entire table to have width:100% so it covers the entire parent. Below is the corrected 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

You've set .input to width: 100% , which is shrinking .label down to the smallest size possible (the length of the words inside)

You could use css calc to make .input 100vw - 300px wide

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

And

.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

Use following css:

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

Answer 5

The problem with your code, is that you should have:

table.mytable {
    width: 100%;
}

Because the <td> is a child element of the <table class="mytable"> . So the parent element has to have a set size to be able to modify child elements such as <td> . The added mytable class is so that it only affects that table incase you have others.