8

HTML テーブルの下部 (または上部など) に行を追加し、各列にテキスト ボックスを追加したいと考えています (各列のコンテンツのフィルタリングを可能にするため)。

FWIW、テーブルは jQuery DataTables プラグインに基づいています。

問題は、テキストボックスが列を広げることです。各テキストボックスを拡大せずに列の幅を埋めるようにします。これどうやってするの？

4

4 に答える 4

19

<input type="text" style="width:100%"/>親 td の幅を取得しようとします。

于 2010-02-03T08:24:41.403 に答える
10

テキストボックスの境界線とパディングが幅に追加されるため、[幅100％]がこのアプローチで問題になる可能性があると思います。

それはそう。

padding-right入力を含むセル (またはすべてのセルのみ) に、入力のボーダーとパディングと同様のサイズを追加することで、これを補うことができます。その後、入力はセルのコンテンツ領域から拡張されますが、パディングのみに拡張されるため、混乱することはありません。

これは、通常のテキスト入力だけで問題ありません。この方法でサイズを変更したい選択ボックスやボタンなどの他の要素もある場合、IE では選択の「幅」に境界線とパディングが含まれるため (OS ウィジェットであるため)、パディング メソッドが逆効果になる可能性があります。 ）。

ほとんどのブラウザーで、これを修正する最も簡単で一貫した方法は、CSS3 box-sizingプロパティです。

td.input input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

IE6-7 はこれをまだサポートしていないため、これらのブラウザーではうまく整列しないフィールドを取得できます。気にする場合は、それら専用のパディング回避策を追加できます。

于 2010-02-03T09:55:20.567 に答える
2

jQuery テーブルは使ったことがないのですが、「width: 80%;」と設定すると、'td' の幅を定義すると、テキスト ボックスはその親 ('td') からその寸法を継承する必要があります。

それでもうまくいかない場合、または別のアプローチが必要な場合は、次の方法を試してください。

td > input[type="text"] {width: 5em;} /* or whatever */
于 2010-02-03T08:30:40.897 に答える