Bagaimana untuk Mencapai Kesesuaian Kandungan Optimum dalam Sel Jadual dengan Pelbagai Saiz Kandungan?

Memotong Sel Jadual dengan Kandungan Optimum Muatan

Apabila berhadapan dengan sel jadual yang mempunyai saiz kandungan yang berbeza-beza, ia menjadi satu cabaran untuk memaparkannya secara sama rata tanpa menjejaskan kebolehbacaan. Meja Fred berfungsi sebagai contoh isu ini. Untuk menangani lebar sel yang tidak sekata, Fred melaksanakan sifat CSS seperti ruang putih: nowrap dan susun atur jadual: tetap, memaksa sel melimpah dan bukannya menjejaskan rakan bersebelahan mereka.

Walau bagaimanapun, pendekatan ini hanya menyelesaikan sebahagian masalah Fred. . Sel kanan, Celldito, selalunya mempunyai ruang kosong yang tertinggal, manakala sel kiri kekal dipotong. Untuk membetulkan perkara ini, Fred mencari penyelesaian yang akan mengagihkan lebar sel secara sama rata, memanfaatkan mana-mana ruang putih yang tersedia dalam Celldito untuk mengoptimumkan keterlihatan kandungan sel kiri.

Satu teknik berkesan untuk mencapai hasil yang diinginkan Fred melibatkan memanipulasi kumpulan lajur jadual ( ) dan menggunakan penggayaan tambahan pada sel. Pelaksanaan di bawah memastikan bahawa:

• Sel mempunyai ketinggian tetap (100% lebar) yang tidak menjejaskan jiran terdekatnya.
• Sel mempunyai lajur sekunder (lebar: 0%) , yang berfungsi sebagai ruang letak tersembunyi, menghalang lajur pertama daripada mengecut kepada lebar sifar.
• Limpahan sel kiri tersembunyi dan kandungannya dipenggal menggunakan elipsis, membenarkan sel kanan menggunakan sebarang ruang putih yang tersedia.

Snippet Kod:

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

Pendekatan berasaskan CSS ini memberikan Fred hasil yang diingini, mengoptimumkan keterlihatan kandungan dalam kedua-dua sel sambil menghalang lebar sel yang tidak sekata.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kesesuaian Kandungan Optimum dalam Sel Jadual dengan Pelbagai Saiz Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!