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


106

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

1
あなただけの入力を提示するためのテーブルを使用している場合、私は、それを示唆している、あなたは使用に切り替える可能性があるformlabelsおよびinput内部のulol。つまり、少なくともわずかにセマンティックです。確かに、formあなたはに固執する場合でも、を使用する必要がありtableます。
デビッドはモニカを

回答:


216

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

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

1
残念ながらIE 7はボックスのサイズ変更を正しく処理しません。IE 7で次のことを試してください... css3.info/preview/box-sizingまたはcss-tricks.com/box-sizingを
AnthonyVO

@AnthonyVO:trueの場合、IE7のための唯一の回避策は、それがIEの条件付きコメントを使用するための特定のCSSを追加することである<!--[if lt IE 8]>input[type="text"] {width:95%}
マルコDemaio

24

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

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

両側に2pxのパディングと、両側に1pxのボーダーを取得します。
100%+ 2 *(2px + 1px)= 100%+ 6px。これは、親tdが持つ100%の子コンテンツよりも多くなります。

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

  • @priccoの回答box-sizing: border-box;に従って設定するか、
  • または、余白とパディングを使用します(余分なサイズを避けます)。

Sr ptsの回答に加えて、パディングとボーダーを0pxに設定すると、100%が機能するはずです。
Mauro

実際、tdのパディングを設定しなくても、非常によく追加されます。
ANeves

1
また、パディングが問題をtext-indent引き起こす場合、テキストのリーディングエッジの前のパディングをシミュレートするため、およびline-height垂直パディングを使用することができます(ただし、垂直パディングを保持しても幅には影響しません)。
デビッドはモニカを

14

などの問題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のパディングがあります。これにより、入力をtdよりも6ピクセル小さくします。これは、最初に必要なものです。

これのメカニズムについてはわかりませんが、動作します。

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

動作します(+1と投票)。奇妙なことに、各<input>の前にテキストを挿入し、「white-space:nowrap」を追加してそれらを同じ行に保ち、「white-space:nowrap」をすべて削除すると、3つの<inputs>がテーブルのセルをオーバーフローしました。再び動作します。変だ。
ホセマヌエル

8

問題は以前に説明されているので、繰り返しますが、幅はボーダーとパディングを考慮していません。これについては議論されていませんが、私がたくさん助けてくれたことがわかった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でテストしました。どちらもこのソリューションを尊重しているようです。

更新:ランダムな反対票を得たばかりなので、オーバーフローに対処するためのより良い方法は、priccoで説明されているCSS3のボックスサイズ属性を使用することです。

.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の既知の問題を参照してください)。


3
短いメモ:overflow: hidden;コンテンツはまったく同じ方法でボックスの外側に「突き抜ける」ままですが、表示されるのではなく切り捨てられるため、他のコンテンツと重複しません。
ANeves、2012年

2

私はこの質問が3年前のものであることを知っていますが、現在のブラウザでも問題は解決せず、人々はまだここに来ています。現時点での解決策はcalc()です。

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

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


1

問題は、入力要素のボックスモデルによるものです。私は最近、モバイルデバイスの入力を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の回答からこの問題を修正しました。すべての入力はli内に含まれていたので、必要なのはli overflow:hiddenを設定して、余分な入力オーバーフローを削除することだけでした。

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

.ie7 input {
  width:100%;
}

1

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

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

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


0

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

乾杯!:)


http://www.w3.org/TR/html4/strict.dtdStrict を使用するつもりですか?ref。w3.org/QA/2002/04/valid-dtd-list.htmlとにかくこれはオプションではないので、DOCTYPEを変更すると、おそらくWebページ内の他の多くのstufのレンダリングに影響するでしょう。
Marco Demaio

0

一部の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などの別の要素に含まれている場合、SPANなどの要素は入力をラップしてそのサイズを表示するため、TDのサイズに制限されるのではなく、ループアップしてTDを見つける必要があります。

2)パディングまたはマージンが異なるレベルで追加されている場合は、[pEl.offsetWidth]から明示的にそれを減算する必要がある場合があります。計算できるHTML構造によって異なります。

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

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

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


0

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

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

-1

私は通常、これを修正するために入力の幅を99%に設定します。

input {
    width: 99%;
}

既定のスタイルを削除することもできますが、テキストボックスであることがわかりにくくなります。ただし、とにかくそのためのコードを示します。

input {
    width: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Ad @ m


-2

問題はborder-width入力要素にあります。まもなく、margin-left入力要素のをに設定してみてください-2px

table input {
  margin-left: -2px;
}

そう思わないでください。ボックスを左にシフトして左マージンを破壊するだけです
cc young
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.