ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目しているのですか? テーブルはすでに時代遅れです... 急いで Xhtml を使用してください... div は良いです... ul は良いです... ol は良いです... dl は良いです... 以上です。他に何が良いのかわかりません。」

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

私たちは言葉の戦いをするためにここにいるわけではない。それは時間に余裕のある人たちに任せよう。

話を元に戻しましょう:

いつだったか覚えていませんが、テーブルを使用して DataGrid をシミュレートするときに、固定幅を超える td 内のテキストが非表示にできず、直接折り返されるのはなぜかと誰かが私に尋ねました。

はい、それは本当です。以下がそれを示しています。

ヒント: 実行前にコードの一部を変更することができます

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

これはテーブルの特性のようです。{width:*px;white-space:nowrap;overflow:hidden;} の組み合わせをうまくサポートできません。結局のところ、white-space:nowrap は機能しないので、overflow:hidden は無効のようです。 {注: これは、意味のない文字の連続である場合に機能します。たとえば、<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> の場合、この連続した a は 1 つの単語と見なされ、折り返されないため、{white-space:nowrap} を使用して 1 行に強制的に表示する必要はありません。したがって、.col1 の幅を超える a は非表示になります。}

[解決策1:]

後で、パーセンテージ幅を使用すると問題ないという人がいました。テストしたところ、本当にうまくいきました。最初の段落のいくつかの行のスタイルを少し変更し、他の行は変更しません。

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

変更したコードを実行すると、幅を超えるテキストが実際に非表示になり、目的の効果が達成されていることがわかります。

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

これらすべての根本は、セル内のテキストを折り返さずに 1 行で表示する方法にあります。

[解決策2:]

この要件を満たすには、スタイルの使用に加えて、長い間使用されていないタグ も考えられます。この要素の機能は、コンテンツを 1 行で表示するように強制することです。上記のコードは次のように変更され、残りは変更されません。

<table border="1" cellspacing="0" summary="表を振り返る: TD も overflow:hidden を使用しています">
<tr>
<td class="col1">神州エレガント Q400N</td>
<td class="col2">Intel Core2 Duo (Merom) T5450 (1.66G) プロセッサを搭載したエレガントな Q400N</td>
<td class="col3">Centrino 4 プラットフォーム、優れたコストパフォーマンス、美しい外観</td>
</tr>
</テーブル>

この変更を行った後、確かに効果が達成されていることがわかります。ワクワクしませんか?いいえ、これは最善の解決策ではないようです。結局のところ、長い間使用されておらず、推奨されていない要素タグを使用しているため、人々は少し不快感を覚えます。

この考え方に従って、私は問題を別の角度から検討し、その問題は簡単に解決できることを発見しました。

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

ベストプラクティス:

ヒント: 実行前にコードの一部を変更することができます

上記のコードを実行すると、このアプローチが実行可能であり、コードのシンプルさ、読みやすさ、合理性の点で以前のソリューションよりも優れていることがわかります。

{固定幅を超えるセルの内容を非表示にすることをまだ試したことがない方は、まず自分のマシンで試してみてから、この記事をお読みください。}

実際、テーブルは面白くて、非常に遊びやすいものです。私たちはそれを色眼鏡で見るべきではありません。なぜなら、それは存在する理由があるからです。

私自身の楽しみのためにも、テーブルについての記事を書き続けるつもりです。

<<: 全体的なユーザーエクスペリエンスを確保する方法

>>: MySQL で explain ステートメントを使用する基本的なチュートリアル