コンテンツ サイズが異なる表のセルにコンテンツを最適にフィットさせるにはどうすればよいですか?

最適なコンテンツフィットで表のセルを切り詰める

コンテンツのサイズが異なる表のセルに直面すると、それらを均等に表示することが困難になります読みやすさを損なうことなく。フレッドのテーブルは、この問題の例として役立ちます。不均一なセル幅に対処するために、Fred は、white-space:nowrap や table-layout:fixed などの CSS プロパティを実装し、隣接するセルに影響を与えるのではなくセルを強制的にオーバーフローさせました。

しかし、このアプローチは Fred の問題を部分的にしか解決しませんでした。 。右側のセル Celldito には空白が残ることが多く、左側のセルは切り詰められたままでした。これを修正するために、Fred は、セルの幅を均等に分散し、Celldito で利用可能な空白を利用して、左側のセルの内容の可視性を最適化するソリューションを探しました。

Fred の望ましい結果を達成するための効果的な手法には、テーブルの列グループ (

) を実行し、セルに追加のスタイルを適用します。以下の実装により、次のことが保証されます。

• セルの高さは固定されており (幅 100%)、隣接セルに影響を与えません。
• セルには 2 番目の列 (幅: 0%) があります。これは非表示のプレースホルダーとして機能し、最初の列が幅 0 に縮小するのを防ぎます。
• 左側のセルのオーバーフローは非表示になり、その内容は省略記号を使用して切り詰められます。これにより、右側のセルが使用可能な空白を使用できるようになります。

コード スニペット:

<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...
        </td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table></code>

この CSS ベースのアプローチは、セル幅の不均等を防ぎながら両方のセルのコンテンツの可視性を最適化し、Fred に望ましい結果をもたらします。

以上がコンテンツ サイズが異なる表のセルにコンテンツを最適にフィットさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。