Menu
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?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional --> <title>Test input text in table</title> <style type="text/css"> 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 */ </style> </head><body> <table cellpadding="0" cellspacing="0"> <tr> <td><p>column one hello babe babe babe</p></td> <td><p>column two hello babe more</p></td> <td><p>column three hello babe more and more</p></td> </tr> <tr> <td><input type="text" value="test"></td> <td><input type="text" value="test"></td> <td><input type="text" value="test"></td> </tr> </table> </body></html> 
595
To create a text box (also called input box), use the <input> tag and set the type attribute to "text". See table 3 for two examples. In the first example, our HTML code starts the form with the <form> tag. Inside this form tag, we placed an input box by using the <input> tag.
1. Set width in HTML. In HTML, you can use the width attribute to set the width of an element. Alternatively, you can also use the size attribute to define the width of the <input> .
If you simply want to specify the height and font size, use CSS or style attributes, e.g. //in your CSS file or <style> tag #textboxid { height:200px; font-size:14pt; } <!
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; } 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:
box-sizing: border-box; as per @pricco's answer;
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
