1

ネストされた要素のスタイルをwidth：80％に設定すると、左側の列の1つが縮小するテーブルがあります。列が縮小され、入力要素の右端が切り捨てられます。input要素からスタイルを削除することで、私が話していることを確認できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td>
                <input type="text" style="width: 80%;" />
            </td>
            <td>
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
                Lots of text to make the right cell expand.
            </td>
        </tr>
    </table>
</body>
</html>

列のサイズが子に基づいているためだと感じましたが、親に基づいて要素のサイズを設定することで、「キャッチ22」を作成しました。

誰かが私に何が起こっているのか、そしてどのように私が同じ列幅を維持し、私の要素をその幅の80％にサイズ設定するのかについて教えてもらえますか？

4

2 に答える 2

7

発生している問題は、<input>幅を幅のないセルのパーセンテージに設定しているためです。そのため、セルは他のセルのテキストを補うために小さくなり、それが完了すると、入力は残っているものの80％を取得します。

オプション：
1）フィールドの幅をピクセル単位で設定し<input>ます。
2）の幅をピクセル/パーセンテージで設定し<td>ます。

コメントへの対処：スタイルを削除すると、スタイルが大きくなる理由は、<input>要素のブラウザのデフォルトサイズに戻るためです。これは、セルに残っているものの80％よりも大きくなります。

于 2009-01-20T20:48:40.910 に答える
1

最初の列に明示的な幅を指定できます。

<table width="100%" border="1">
    <tr>
            <td width="20%">
                    <input type="text" style="width: 80%;" />
            </td>
于 2009-01-20T20:49:15.977 に答える