一貫したセル幅を維持し、コンテンツ表示を最大化しながら、表のセルの切り捨てを解決するにはどうすればよいですか?

コンテンツ表示を最大化しながらテーブルのセルの切り捨てを解決する

テーブル レイアウトの領域では、セルのコンテンツが制限を超えるとセルの切り捨ての問題が発生します。指定された幅。簡単な解決策は、コンテンツを切り詰めて省略記号 (...) を付けて、完全な情報が表示されないことを示すことです。ただし、このアプローチではセル幅が不均一になり、一部のセルに過剰な空白が残る可能性があります。

この課題に対処するには、使用可能な空白を使い果たした場合にのみセルが均一にオーバーフローするようにする手法を採用できます。

コード解決策:

次のコード スニペットは、このアプローチの例です:

<code class="html"><table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%">
        <col width="0%">
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">
            This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.
        </td>
        <td style="white-space: nowrap;">
            Less content here.
        </td>
    </tr>
</table></code>

説明:

1. 列グループ (colgroup):

   • を使用して 2 つの列を定義します。最初の列は 100% の幅を占め、2 番目の列は幅を占めます。幅は 0% です。これにより、2 つのセルの幅を制御できます。

2. 表のセル スタイル:

   • 最初のセルには次のスタイル属性があります:

     • white-space: nowrap: コンテンツが複数行に折り返されるのを防ぎます
     • text-overflow:ellipsis: コンテンツを省略記号で切り詰めます
     • overflow: hidden: オーバーフローしたコンテンツを非表示にします
     • max-width:1px: セルに最小の初期幅を提供し、完全に折りたたまれないようにします

3. 2 番目のテーブル セル:

   • 2 番目のセルには空白があります: nowrap、コンテンツの折り返しを防ぎ、2 番目の列が確実に表示されるようにします。

最初の列の最大幅を 1 ピクセルに設定すると、テーブル内の「最も弱い」ポイントになります。テーブルが水平方向に縮小すると、最初のセルがこの幅のしきい値を超えて切り捨てが開始され、2 番目のセルの列の幅に影響を与えることなく縮小するスペースに対応します。

結果:

このアプローチには次の利点があります。

• セルが均等にオーバーフローし、幅が一定になります。
• セルは空白をすべて使い果たした場合にのみ切り詰められます。
• テーブルが大幅に縮小しても、2 番目のセルの内容は保持されます。

以上が一貫したセル幅を維持し、コンテンツ表示を最大化しながら、表のセルの切り捨てを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。