ホームページ > 記事 > ウェブフロントエンド > Web ページ制作 TD は、display_HTML/Xhtml_Web ページ制作をオーバーフローして非表示にすることもできます
Web ページ制作 TD は、display_HTML/Xhtml_Web ページ制作をオーバーフローして非表示にすることもできます
- WBOYオリジナル
- 2016-05-16 16:42:151956ブラウズ
おそらく私がこの記事にそのような名前を付けるとすぐに、誰かがこう尋ねるでしょう: なぜ 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:]
この要件を達成するには、スタイルの使用に加えて、長い間使用されていないタグ
| ;nobr> エレガントな Q400N、Intel Core2 Duo (Merom) T5450 (1.66G) プロセッサーを使用 |
このアイデアに従って、この問題を別の角度から検討したところ、問題は簡単に解決できることがわかりました。
固定幅セルの th と td に単純にwhite-space:nowrapを追加することはできないため、固定幅セルにmark要素を追加するとどうなるでしょうか?
最良の解決策:
提示：您可以先修改部分代码再运行
运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
{还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文}
其实table是一个有趣，可玩性很高东东。我们不应该带着有色眼睛去看它，因为它有它存在的道理。
之后会继续写一些关于table的文章，也作自娱之用。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。