Bagaimana untuk Menyelesaikan Pemangkasan Sel Jadual Sambil Mengekalkan Lebar Sel yang Konsisten dan Memaksimumkan Paparan Kandungan?

Menyelesaikan Pemangkasan Sel Jadual Semasa Memaksimumkan Paparan Kandungan

Dalam bidang susun atur jadual, isu pemotongan sel timbul apabila kandungan sel melebihi lebarnya yang ditetapkan. Penyelesaian mudah ialah memotong kandungan, menyediakan elipsis (...) untuk menunjukkan bahawa maklumat lengkap tidak kelihatan. Walau bagaimanapun, pendekatan ini boleh membawa kepada lebar sel yang tidak sekata, menyebabkan sesetengah sel mempunyai ruang kosong yang berlebihan.

Untuk menangani cabaran ini, kami boleh menggunakan teknik yang memastikan sel melimpah secara seragam, hanya apabila ia telah kehabisan ruang putih yang tersedia.

Penyelesaian Kod:

Coretan kod berikut contoh pendekatan ini:

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

Penjelasan:

1. Kumpulan Lajur (colgroup):

   • Kami mentakrifkan dua lajur menggunakan , dengan lajur pertama menduduki 100% lebar dan lajur kedua dengan 0% lebar. Ini membolehkan kami mengawal lebar dua sel.

2. Gaya Sel Jadual:

   • The sel pertama mempunyai atribut gaya berikut:

     • ruang putih: nowrap: Menghalang kandungan daripada membalut ke berbilang baris
     • text-overflow:ellipsis: Memotong kandungan dengan elipsis
     • overflow: hidden: Menyembunyikan kandungan yang melimpah
     • max-width:1px: Menyediakan lebar awal minimum untuk sel, memastikan ia tidak runtuh sepenuhnya

3. Sel Jadual Kedua:

   • Sel kedua mempunyai ruang putih: nowrap , menghalang pembalut kandungan dan memastikan lajur kedua menghormati 0%nya lebar.

Dengan menetapkan lebar maksimum lajur pertama kepada 1 piksel, ia menjadi titik "paling lemah" dalam jadual. Apabila jadual mengecut secara mendatar, sel pertama melepasi ambang lebar ini dan mula memotong, menampung ruang mengecut tanpa menjejaskan lebar lajur sel kedua.

Hasil:

Pendekatan ini menyediakan perkara berikut faedah:

• Sel melimpah sekata, menghasilkan lebar yang konsisten.
• Sel hanya dipotong apabila mereka telah menghabiskan semua ruang putihnya.
• Kandungan sel kedua ialah dipelihara walaupun jadual mengecut dengan ketara.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Pemangkasan Sel Jadual Sambil Mengekalkan Lebar Sel yang Konsisten dan Memaksimumkan Paparan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!