コンテンツのオーバーフローが発生したときにテーブルのセルを均等に切り詰める方法

テーブルのセルを均等に切り詰める

アパートのスペースが変動するテーブルである Fred は、セル内にさまざまなコンテンツを適合させるという課題に直面しています。過剰なコンテンツに直面したとき、Fred は表の幅からはみ出さないように 1 つのセルのコンテンツを切り詰めることにしました。しかし、彼は、すべてのセルがコンテンツの切り捨てに等しく寄与する、より良い解決策が存在するのではないかと考えています。

Fred の懸念に対処するには、次のアプローチを採用できます。

<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>

この解決策では:

• colgroup 要素は 2 つの列を指定するために導入されています。1 つは幅 100% でテーブルの幅の大部分を占め、もう 1 つは幅 0% でフレキシブル セルとして機能します。
• 最初のセルには、改行を防ぐ空白:nowrap スタイル、コンテンツを切り詰めるための text-overflow: ellipsis、および余分なコンテンツを非表示にする overflow: hidden があります。
• 最大値最初のセルの -width: 1px スタイルにより、必要な幅だけが占有され、残りのスペースが 2 番目のセルに残ります。
• 2 番目のセルは、オリジナルを維持するために、white-space: nowrap を使用します。 width.

このアプローチにより、十分なスペースがある場合、すべてのセルに完全な内容が表示されます。ただし、スペースが不十分な場合は、最初のセルのコンテンツが最初に切り詰められ、2 番目のセルにコンテンツを表示するための追加スペースが与えられます。

以上がコンテンツのオーバーフローが発生したときにテーブルのセルを均等に切り詰める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。