Web ページ制作 TD は、display_HTML/Xhtml_Web ページ制作をオーバーフローして非表示にすることもできます-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:42:15

オリジナル

1991 人が閲覧しました

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

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

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

本題に戻ります:

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

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

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

これはテーブルの特性のようですが、{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要素を追加するとどうなるでしょうか?

最良の解決策:

提示：您可以先修改部分代码再运行

　　运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。

　　{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}

　　其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。

　　之后会继续写一些关于table的文章，也作自娱之用。