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>
This question is related to
html
input
html-table
width
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:
<div class="input-wrapper">
<input type="text" />
</div>
.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!
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
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:
<table>
<tr>
<td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
</tr>
</table>
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).
Take out the "http://www.w3.org/TR/html4/loose.dtd" from the DOCTYPE declaration and it fix your problem.
Cheers! :)
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 < 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 < 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 < newSizes.length; i++)
{
newSizes[i].el.style.width = newSizes[i].width;
}
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.
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;
}
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
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;
}
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;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):
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: red; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
<td style="background-color: purple; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
<td style="background-color: green; padding: 3px;">
<div style="margin-right: 3px;">
<div style="padding-right: 3px;">
<input type="text" style="width:100%;">
</div>
</div>
</td>
</tr>
</table>
(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.
<table style="background-color: blue; width: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: red; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
<td style="background-color: purple; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
<td style="background-color: green; padding: 3px;">
<div style="margin-right: 6px;">
<input type="text" style="width:100%;">
</div>
</td>
</tr>
</table>
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.
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%;
}
Source: Stackoverflow.com