Sometimes, we want to fix HTML input textbox with a width of 100% overflowing table cells with CSS.
In this article, we’ll look at how to fix HTML input textbox with a width of 100% overflowing table cells with CSS.
How to fix HTML input textbox with a width of 100% overflowing table cells with CSS?
To fix HTML input textbox with a width of 100% overflowing table cells with CSS, we set the box-sizing property.
For instance, we write
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
to set the box-sizing property to border-box to stop the input from overflowing the table cell when it’s 100% width.
Conclusion
To fix HTML input textbox with a width of 100% overflowing table cells with CSS, we set the box-sizing property.