宽度为 100% 的 HTML 输入文本框溢出表格单元格

Question

提问by Marco Demaio

Does anyone know why the input elements with a width of 100% go over the table's cells border.

有谁知道为什么宽度为 100% 的输入元素会超过表格的单元格边框。

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.

在下面的简单示例中，输入框越过表格的单元格边框，结果很糟糕。这是经过测试的，它以相同的方式发生在：Firefox、IE7 和 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>

Answer 1

回答by pricco

You could use the CSS3 box-sizingproperty to include the external padding and border:

您可以使用 CSS3box-sizing属性来包含外部填充和边框：

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Answer 2

回答by ANeves

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.

每边有 2px 的内边距，每边有 1px 的边框。
100% + 2*(2px +1px) = 100% + 6px，这比父 td 拥有的 100% 子内容还要多。

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).

无论是设定box-sizing: border-box;为每@ pricco的答案;
或者使用 0 边距和填充（避免额外的大小）。

Answer 3

回答by Andreas

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).

诸如此类的问题width:95%;在于，它们在广泛的灵活布局中看起来并不正确（因为 5% 可能相当于 30 像素）。

The following solutions works very well for me (tested in Firefox, IE 9, Safari):

以下解决方案对我非常有效（在 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.

诀窍是用两个 div 包裹输入，外部有 3px 的边距（这使它比 td 小 3px），内部有 3px 的填充。这使得输入比 td 小 6px，这是您想要开始的。

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.

在这个简单的例子中，它也只适用于右边距为 6 的单个 div。但是，在我的 Web 应用程序的情况下，只有上述解决方案有效。

<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>

Answer 4

回答by David Peterson

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.

包装 INPUT 的 DIV 没有填充也没有边框。这就是解决方案。DIV 将扩展到其容器的大小，但它也会考虑边框和填充。现在， INPUT 将没有问题扩展到其容器的大小，因为它是无边框和无焊盘的。另请注意，DIV 的溢出设置为隐藏。似乎默认情况下，项目可能会落在它们的容器之外，并且默认溢出可见。这只是确保输入保持在其容器内并且不会尝试戳穿。

I've tested this in Chrome and in Fire Fox. Both seem to respect this solution well.

我已经在 Chrome 和 Fire Fox 中对此进行了测试。两者似乎都很好地尊重这个解决方案。

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:

更新：由于我刚刚得到一个随机的反对票，我想说处理溢出的更好方法是使用 pricco 描述的 CSS3 box-sizing 属性：

.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-sizingKnown Issues).

这似乎得到了主要浏览器的很好的支持，并且不像溢出技巧那样“hacky”。但是，使用这种方法在当前浏览器上存在一些小问题（请参阅http://caniuse.com/#search=box-sizing已知问题）。

Answer 5

回答by trojan

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():

我知道这个问题已经有 3 年历史了，但是对于当前的浏览器，这个问题仍然存在，人们仍然会来这里。现在的解决方案是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.

大多数现代浏览器都支持它。

Answer 6

回答by bortunac

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

这样单元格边框可见，您可以控制行背景颜色

Answer 7

回答by hallodom

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.

问题是由于输入元素框模型。我最近在尝试将移动设备的输入保持在 100% 时找到了一个很好的解决方案。

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。然后将输入所需的样式应用到包装器 div。例如：

<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!

给 .input-wrapper 圆角填充等，无论你想要什么输入，然后给输入宽度 100%。你的输入用边框等很好地填充，但没有烦人的溢出！

Answer 8

回答by chet

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.

我从@hallodom 的回答开始解决了这个问题。我所有的输入都包含在 li's 中，所以我所要做的就是设置 li overflow:hidden 以消除多余的输入溢出。

.ie7 form li {
  width:100%;
  overflow:hidden;
}

.ie7 input {
  width:100%;
}

Answer 9

回答by AnthonyVO

With some Javascript you can get the exact width of the containing TD and then assign that directly to the input element.

使用一些 Javascript，您可以获得包含 TD 的确切宽度，然后将其直接分配给输入元素。

The following is raw javascript but jQuery would make it cleaner...

以下是原始 javascript，但 jQuery 会使它更干净......

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.

1）如果您的输入包含在另一个元素（例如 SPAN）中，那么您将需要循环并找到 TD，因为像 SPAN 这样的元素将包装输入并显示其大小，而不是仅限于 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.

2) 如果您在不同级别添加了填充或边距，那么您可能必须明确地从 [pEl.offsetWidth] 中减去它。根据您可以计算的 HTML 结构。

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..

3) 如果表格列的大小是动态调整的，那么更改一个元素的大小将导致表格在某些浏览器中重排，并且您可能会在顺序“修复”输入大小时获得阶梯效果。解决方案是以百分比或像素的形式为列分配特定的宽度，或者收集新的宽度并在之后设置它们。看下面的代码..

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;
}

Answer 10

回答by Lucian

Take out the "http://www.w3.org/TR/html4/loose.dtd" from the DOCTYPE declaration and it fix your problem.

从 DOCTYPE 声明中取出“http://www.w3.org/TR/html4/loose.dtd”并解决您的问题。

Cheers! :)

干杯! :)

宽度为 100% 的 HTML 输入文本框溢出表格单元格

提问by Marco Demaio

回答by pricco

回答by ANeves

回答by Andreas

回答by David Peterson

回答by trojan

回答by bortunac

回答by hallodom

回答by chet

回答by AnthonyVO

回答by Lucian

相关推荐

最近更新

标签

宽度为 100% 的 HTML 输入文本框溢出表格单元格

提问by Marco Demaio

回答by pricco

回答by ANeves

回答by Andreas

回答by David Peterson

回答by trojan

回答by bortunac

回答by hallodom

回答by chet

回答by AnthonyVO

回答by Lucian

相关推荐

使用 HTML 和 CSS 的可折叠列表

Html 如何使页面不可滚动？

Html 在鼠标悬停期间更改图像大小

Html 使一段文本不间断？

相关推荐

最近更新

标签