Html input textbox with a width of 100% overflows table cells

Breaking down box-sizing

The box-sizing property controls how the total width and height of an element are measured. By setting it to border-box, you direct the browser to include any border and padding within the width when doing the math.

In older browser versions, vendor prefixes (-webkit-, -moz-) are needed to ensure uniform behavior across all platforms. Even though modern browsers understand box-sizing sans prefixes, including them provides a safety net for legacy environments.

Additional practices to handle overflow

Manual sizing adjustment

If climate change, or company policies, prevent you from altering box-sizing, consider manually adjusting the input's width. Without box-sizing, you subtract the margin and padding from the width:

input[type="text"] {
  width: calc(100% - 12px); /* We may be here for the cookies, but not for the overflows */
  -webkit-calc(100% - 12px); /* Fun fact: Safari 6.0 was released alongside iPhone 5 */
}


calc plays a key role in dynamically calculating widths to ensure a perfect fit across various scenarios.

Using an input wrapper

Wrapping the input within a div, and setting the div’s overflow to hidden offers another remedy. In effect, it creates a new block formatting context, thereby containing the input within parent container limits.

<td>
  <div style="overflow: hidden; /* Hide, overflow! Boss is coming */">
    <input type="text" style="width: 100%; /* Ain't nobody got time for horizontal scrollbars */">
  </div>
</td>


Tweaking margin or padding of the input when it's wrapped in a div grants you extra control over spacing without hurting the table's real estate.

Checking cross-browser harmony

Browsers are like pets, different breeds have distinct behaviors. Ensure the harmony of your CSS fixes with pervasive testing:

• Utilize developer tools to create varying environments.
• Sample your CSS on older browser versions.
• Gain insight into the idiosyncrasies of specific browsers that could affect your layout.

Obstacles on the road to overflow-free tables

Here's your personal guide of obstacles:

• Global styles that might clash with your inputs.
• Vendor-specific styles that could override your rules.
• The padding and borders of td elements that can, and will, influence your inputs.

Ensuring a seamless presentation

• Zero out default padding and margins for inputs, then incrementally adjust.
• Moderate parent td padding to provide breathing space for inputs without encroaching width.
• If div wrapping is your game, increase its margin to counteract table cell border spacing.