web-dev-qa-db-ja.com

幅が100％のHTML入力テキストボックスがテーブルセルをオーバーフローする

幅100％の入力要素がテーブルのセルの境界を越える理由を誰もが知っていますか。

以下の単純な例では、入力ボックスがテーブルのセルの境界線を超えているため、結果はひどいものになります。これはテスト済みで、Firefox、IE7、Safariでも同じように発生します。

あなたにとって意味がありますか？私は何かが欠けていますか、可能な解決策を知っていますか？

<!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>
htmlinputhtml-tablewidth
103
Marco Demaio

CSS3 box-sizingプロパティを使用して、外部のパディングと境界線を含めることができます。

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

幅の値は境界線やパディングを考慮していません。

http://www.htmldog.com/reference/cssproperties/width/

各辺に2pxのパディング、および各辺に1pxの境界線が追加されます。
100％+ 2 *（2px + 1px）= 100％+ 6px。これは、親tdが持つ100％の子コンテンツを超えています。

次のオプションがあります。

  • @ pricco's answer ;に従ってbox-sizing: border-box;を設定するか、
  • または、0マージンとパディングを使用します（余分なサイズを避けます）。
24
ANeves

width:95%;のようなものの問題は、それらが幅の広い柔軟なレイアウトで正しく見えないことです（5％が30ピクセルのようになる可能性があるため）。

次のソリューションは私にとって非常にうまく機能します（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>

（正しいパディングに気付きやすくするために色を追加しました）

トリックは、入力を2つのdivでラップすることです。外側には3pxのマージンがあり（tdより3px小さくなります）、内側には3pxのパディングがあります。これにより、入力6pxがtdより小さくなります。

これの仕組みについてはわかりませんが、うまくいきます。

この単純な例では、右マージン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>
14
Andreas

問題は以前に説明されているので、繰り返しますが、幅は境界線とパディングを考慮していません。これに対する1つの可能な答えは議論されていませんが、私がたくさんの助けになったとわかったのはあなたの入力をラップすることです。コードは次のとおりです。これがどのように役立つかをすぐに説明します。

<table>
  <tr>
    <td><div style="overflow:hidden"><input style="width:100%" type="text" name="name" value="hello world" /></div></td>
  </tr>
</table>

INPUTをラップするDIVにはパディングもボーダーもありません。これが解決策です。 DIVはコンテナのサイズに拡張されますが、境界線とパディングも尊重します。これで、INPUTにはコンテナのサイズに拡張する問題がありません。境界線とパッドがないためです。また、DIVのオーバーフローは非表示に設定されていることに注意してください。デフォルトでは、アイテムはコンテナの外に出て、デフォルトのオーバーフローが表示されるようです。これにより、入力がコンテナ内にとどまり、突き抜けようとしません。

ChromeおよびFire Foxでこれをテストしました。どちらもこのソリューションをよく尊重しているようです。

UPDATE：ランダムに下票を得たので、オーバーフローに対処するためのより良い方法はCSS3のボックスサイズ設定です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;
}

これは主要なブラウザで十分にサポートされているようで、オーバーフロートリックのような「ハッキング」ではありません。ただし、このアプローチには現在のブラウザーにいくつかの小さな問題があります（ http://caniuse.com/#search=box-sizing 既知の問題を参照）。

8
David Peterson

私はこの質問が3年前であることを知っていますが、現在のブラウザではまだ問題が続いており、人々はまだここに来ています。今の解決策は calc（） ：

input {
    width: calc(100% - 12px); /* IE 9,10 , Chrome, Firefox */
    width: -webkit-calc(100% - 12px); /*For safari 6.0*/
}

最新のほとんどのブラウザでサポートされています。

2
trojan

この問題は、入力要素ボックスモデルが原因です。私は最近、モバイルデバイスの入力を100％に維持しようとしたときに、この問題に対する素晴らしい解決策を見つけました。

入力を別の要素、たとえば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;
}

.input-wrapperの角を丸めたパディングなど、入力に必要なものを何でも指定し、入力幅を100％にします。入力はボーダーなどできれいに埋め込まれていますが、迷惑なオーバーフローはありません！

1
hallodom

このマージン闘争の代わりに

input{
    width:100%;
    background:transparent !important;
}

これにより、セルの境界線が表示され、行の背景色を制御できます

1
bortunac

@hallodomの回答から始めて、この問題を修正しました。入力はすべてli内に含まれていたので、li overflow：hiddenを設定して、余分な入力オーバーフローを削除するだけでした。

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

.ie7 input {
  width:100%;
}
1
chet

これを使って問題を解決しました

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;
}
0
Kevin Muchwat

box-sizing:border-box;を適用することで問題を解決しました。入力とラッパーで同じことを行うことに加えて、テーブルのセル自体に。

0
Vanco

一部のJavascriptを使用すると、含まれるTDの正確な幅を取得し、それを直接入力要素に割り当てることができます。

以下は生の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;
    }
}

このソリューションの問題は次のとおりです。

1）入力がSPANなどの別の要素に含まれている場合は、ループアップしてTDを見つける必要があります。なぜなら、SPANのような要素は入力をラップし、サイズに制限されるのではなくサイズを表示するからですTDの。

2）異なるレベルで追加されたパディングまたはマージンがある場合、[pEl.offsetWidth]から明示的にそれを差し引く必要があるかもしれません。計算できるHTML構造に応じて。

3）テーブルの列が動的にサイズ変更される場合、1つの要素のサイズを変更すると、一部のブラウザーでテーブルがリフローし、入力サイズを順番に「修正」するときに段階的な効果が得られる場合があります。解決策は、特定の幅をパーセンテージまたはピクセルとして列に割り当てることです。ORは新しい幅を収集し、後で設定します。以下のコードを参照してください。

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

DOCTYPE宣言から「http://www.w3.org/TR/html4/loose.dtd」を取り出して、問題を修正します。

乾杯！ :)

0
Lucian