Web ページ制作 TD は、display_HTML/Xhtml_Web ページ制作をオーバーフローして非表示にすることもできます

おそらく私がこの記事にそのような名前を付けるとすぐに、誰かがこう尋ねるでしょう: なぜ table にまだ注目しているのですか? それはすでに時代遅れです... 急いで Xhtml... div は良いです... ul は良いです。 .. ol は良いです... DL は良いです... もう終わりです、いいえ、他に何かを知っておく方が良いです。

テーブルは本当に時代遅れですか?表を本当に理解していますか？テーブルの使い方を本当に知っていますか?

舌戦は私たちがやりたいことではありません。時間に余裕のある人に任せてください。

本題に戻ります:

誰かが DataGrid をシミュレートするためにテーブルを使用していて、固定幅を超える TD 内のテキストを非表示にできない理由を尋ねたのを覚えていませんが、直接包みますか？

はい、これは実際に当てはまります。

<style type="text/css"> テーブル {幅:500ピクセル;テーブルレイアウト:固定;} .col1 {幅:100px;} .col2 {幅:200px;} .col3 {幅:200px;} td {空白:nowrap;オーバーフロー:非表示;} </スタイル> <table border="1" cellpacing="0" summary="表を振り返る: TD は overflow:hidden もプレイします"> <tr> <td class="col1">神州エレガント Q400N <td class="col2">Intel Core2 Duo(Merom) T5450(1.66G) プロセッサを使用したエレガントな Q400N <td class="col3">Centrino 4 プラットフォーム、優れたコストパフォーマンス、美しい外観 </テーブル> </style>

ヒント: を実行する前にコードの一部を変更できます。
上記のコードを実行すると、固定幅を超えるセル内のテキストは非表示にならず、新しい行に表示されることがわかります。これは明らかに私の意図ではありません。

これはテーブルの特性のようですが、{width:*px;white-space:nowrap;overflow:hidden;} の組み合わせをうまくサポートできません。最終的には白になります。 -space:nowrap が動作しないので、overflow:hidden が無効になっているようです。 {注: 意味のない文字が連続している場合は、次のように有効になります。 & td } この一連の a は改行なしで 1 つの単語として認識されるため、強制的に行内に収めるには、 .col1 の幅を超える a は非表示になります}

[解決策 1:]

後で誰かがテストした結果、パーセント幅を使用するだけで十分であると述べました。最初の段落の数行のスタイルを少し変更し、他の行は変更しないでください:

.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

修正したコードを実行すると、確かに幅を超えた文字が非表示になる効果が得られていることがわかります。

実際、パーセント幅を使用するとテキストの非表示の問題を確かに解決できますが、場合によってはパーセント幅ではなく固定幅が必要になるため、これは最良の解決策ではないようです。

根本はセル内の文字を折り返さずに一行で表示させる方法です。

[解決策 2:]

この要件を達成するには、スタイルの使用に加えて、長い間使用されていないタグ を使用することも考えられます。この要素の機能は、コンテンツを強制的に 1 行で表示することです。上記のコードに次の変更を加え、他のすべては変更しないでください。

神州エレガント Q400N	;nobr> エレガントな Q400N、Intel Core2 Duo (Merom) T5450 (1.66G) プロセッサーを使用	Centrino 4 プラットフォームコストパフォーマンスに優れ、見た目も美しい

この変更を行うと、次のような効果が得られます。本当に達成されました、興奮する時間ですか？いいえ、これは最善の解決策ではないようです。結局のところ、長い間使用されていない要素タグを使用するのは少し不快であり、推奨されません。

このアイデアに従って、この問題を別の角度から検討したところ、問題は簡単に解決できることがわかりました。

固定幅セルの th と td に単純にwhite-space:nowrapを追加することはできないため、固定幅セルにmark要素を追加するとどうなるでしょうか?

最良の解決策:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Content-Language" content="gb2312"> <title></title>