HTML input textbox with a width of 100 overflows table cells

Question

Does anyone know why the input elements with a width of 100  go over the table s cells border   In the simple example below input box go over the table s cells border  the result is horrible  This was tested and it happens in the same way on  Firefox  IE7 and Safari   Does it make sense for you  Am I missing something  do you know about a possible solution    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt       lt html gt  lt head gt          lt meta http-equiv  Content-Type  content  text html  charset windows-1252  gt   lt  -- don t use closing slash in meta tag  it breaks HTML4 01 transitional -- gt      lt title gt Test input text in table lt  title gt      lt style type  text css  gt              table  border-top  1px solid  ff0000  border-left  1px solid  ff0000         table td  border-right  1px solid  00ff00  border-bottom  1px solid  00ff00         input type  text    width  100       removing this would make input not to go over cells border  but they would be too short  I want them to fit cells size        lt  style gt       lt  head gt  lt body gt    lt table cellpadding  0  cellspacing  0  gt      lt tr gt         lt td gt  lt p gt column one hello babe babe babe lt  p gt  lt  td gt         lt td gt  lt p gt column two hello babe more lt  p gt  lt  td gt         lt td gt  lt p gt column three hello babe more and more lt  p gt  lt  td gt      lt  tr gt      lt tr gt         lt td gt  lt input type  text  value  test  gt  lt  td gt         lt td gt  lt input type  text  value  test  gt  lt  td gt         lt td gt  lt input type  text  value  test  gt  lt  td gt      lt  tr gt   lt  table gt    lt  body gt  lt  html gt

User · Answer

The problem with things like width 95   is that they don t look right in wide flexible layouts  because 5  can then be like 30 pixels    The following solutions works very well for me  tested in Firefox  IE 9  Safari     lt table style  background-color  blue  width  100    cellpadding  0  cellspacing  0  gt   lt tr gt       lt td style  background-color  red    padding  3px   gt           lt div style  margin-right  3px   gt               lt div style  padding-right  3px   gt                   lt input type  text  style  width 100    gt               lt  div gt           lt  div gt       lt  td gt       lt td style  background-color  purple    padding  3px   gt           lt div style  margin-right  3px   gt               lt div style  padding-right  3px   gt                   lt input type  text  style  width 100    gt               lt  div gt           lt  div gt       lt  td gt       lt td style  background-color  green    padding  3px   gt           lt div style  margin-right  3px   gt               lt div style  padding-right  3px   gt                   lt input type  text  style  width 100    gt               lt  div gt           lt  div gt       lt  td gt   lt  tr gt   lt  table gt     added the colors to make it easier to notice the correct padding   The trick is to wrap the input with two divs  the outer has a 3px margin  which makes it 3px smaller than the td   the inner has a 3px padding   This makes the input 6px smaller than the td  which is what you wanted to begin with   I am not sure about the mechanics of this  but it works     In this simple example  it also works with just a single div with right margin 6   However  in the case of my web application  only the above solution works     lt table style  background-color  blue  width  100    cellpadding  0  cellspacing  0  gt   lt tr gt       lt td style  background-color  red    padding  3px   gt           lt div style  margin-right  6px   gt                   lt input type  text  style  width 100    gt           lt  div gt       lt  td gt       lt td style  background-color  purple    padding  3px   gt           lt div style  margin-right  6px   gt                   lt input type  text  style  width 100    gt           lt  div gt       lt  td gt       lt td style  background-color  green    padding  3px   gt           lt div style  margin-right  6px   gt                   lt input type  text  style  width 100    gt           lt  div gt       lt  td gt   lt  tr gt   lt  table gt

User · Answer

You could use the CSS3 box-sizing property to include the external padding and border   input type  text          width  100         box-sizing  border-box       -webkit-box-sizing border-box       -moz-box-sizing  border-box

User · Answer

The problem has been explained previously so I will only reiterate  width doesn t take into account border and padding   One possible answer to this not discussed but which I have found helped me out a bunch is to wrap your inputs   Here s the code  and I ll explain how this helps in a second    lt table gt     lt tr gt       lt td gt  lt div style  overflow hidden  gt  lt input style  width 100   type  text  name  name  value  hello world    gt  lt  div gt  lt  td gt     lt  tr gt   lt  table gt    The DIV wrapping the INPUT has no padding nor does it have a border   This is the solution   A DIV will expand to its container s size  but it will also respect border and padding   Now  the INPUT will have no issue expanding to the size of its container since it is border-less and pad-less   Also note that the DIV has its overflow set to hidden   It seems that by default items can fall outside of their container with the default overflow of visible   This just ensures that the input stays inside its container and doesn t attempt to poke through   I ve tested this in Chrome and in Fire Fox   Both seem to respect this solution well   UPDATE   Since I just got a random downvote  I would like to say that a better way to deal with overflow is with the CSS3 box-sizing attribute as described by pricco    myinput       -moz-box-sizing  border-box      -webkit-box-sizing  border-box      -ms-box-sizing  border-box      -o-box-sizing  border-box      box-sizing  border-box      This seems to be pretty well supported by the major browsers and isn t  hacky  like the overflow trick   There are  however  some minor issues on current browsers with this approach  see http   caniuse com  search box-sizing Known Issues

User · Answer

The problem lies in border-width of input element  Shortly  try setting the margin-left of the input element to -2px   table input     margin-left  -2px

User · Answer

I solved the problem by applying box-sizing border-box  to the table cells themselves  besides doing the same with the input and the wrapper

User · Answer

Width value doesn t take into account border or padding   http   www htmldog com reference cssproperties width   You get 2px of padding in each side  plus 1px of border in each side  100    2  2px  1px    100    6px  which is more than the 100  child-content the parent td has   You have the option of    Either setting box-sizing  border-box  as per  pricco s answer  Or using 0 margin and padding  avoiding the extra size

User · Answer

With some Javascript you can get the exact width of the containing TD and then assign that directly to the input element   The following is raw javascript but jQuery would make it cleaner     var inputs   document getElementsByTagName  input    for  var i   0  i  lt  inputs length  i          var el   inputs i       if  el style width     100                  var pEl   el parentNode      Assumes the parent node is the TD            el style width   pEl offsetWidth            The issues with this solution are   1  If you have your inputs contained in another element such as a SPAN then you will need loop up and find the TD because elements like SPANs will wrap the input and show its size rather then being limited to the size of the TD   2  If you have padding or margins added at different levels then you might have to explicitly subtract that from  pEl offsetWidth    Depending on your HTML structure that can be calculated   3  If the table columns are sized dynamically then changing the size of one element will cause the table to reflow in some browsers and you might get a stepped effect as you sequentially  fix  the input sizes   The solution is to assign specific widths to the column either as percentages or pixels OR collect the new widths and set them after   See the code below    var inputs   document getElementsByTagName  input    var newSizes       for  var i   0  i  lt  inputs length  i          var el   inputs i       if  el style width     100                  var pEl   el parentNode      Assumes the parent node is the TD            newSizes push    el  el  width  pEl offsetWidth                 Set the sizes AFTER to avoid stepping    for  var i   0  i  lt  newSizes length  i          newSizes i  el style width   newSizes i  width

User · Answer

I fixed this issue starting with  hallodom s answer  All my inputs were contained within li s  so all I had to do was set the li overflow hidden for it to remove that excess input overflow    ie7 form li     width 100     overflow hidden      ie7 input     width 100

User · Answer

Take out the  http   www w3 org TR html4 loose dtd  from the DOCTYPE declaration and it fix your problem    Cheers

User · Answer

The problem is due to the input element box model  I just recently found a nice solution to the issue when trying to keep my input at 100  for mobile devices    Wrap your input with another element  a div for example  Then apply the styling you want for your input to that the wrapper div  For example    lt div class  input-wrapper  gt    lt input type  text    gt   lt  div gt    input-wrapper       border-raius 5px      padding 10px     input-wrapper input type text        width 100       font-size 16px      Give  input-wrapper rounded corner padding etc  whatever you want for your input  then give the input width 100   You have your input padded nicely with a border etc but without the annoying overflow

User · Answer

I solved the problem by using this  tr td input type text      width  100     box-sizing  border-box    -webkit-box-sizing border-box    -moz-box-sizing  border-box    background transparent  important    border  0px

User · Answer

I usually set the width of my inputs to 99  to fix this   input       width  99       You can also remove the default styles  but that will make it less obvious that it is a text box  However  I will show the code for that anyway   input       width  100       border-width  0      margin  0      padding  0      -webkit-appearance  none      -moz-appearance  none      appearance  none      Ad m

User · Answer

instead of this margin struggle just do  input      width 100       background transparent  important      this way the cell border is visible and you can control row background color

User · Answer

I know that this question is 3 years old but the problem still persists for current browsers and folks are still coming here  The solution for now is calc      input       width  calc 100  - 12px      IE 9 10   Chrome  Firefox        width  -webkit-calc 100  - 12px     For safari 6 0       It is supported by most modern browsers

[html] HTML input textbox with a width of 100% overflows table cells

Examples related to html

Examples related to input

Examples related to html-table

Examples related to width