Databases
StackOverflow2013
Postsdbo
POHTML input textbox with a width of 100% overflows table cells
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML input textbox with a width of 100% overflows table cells
    text
    copied!<p>Does anyone know why the input elements with a width of 100% go over the table's cells border.</p> <p>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.</p> <p>Does it make sense for you? Am I missing something, do you know about a possible solution?</p> <pre><code>&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; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload