Bagaimana untuk Memotong Sel Jadual Secara Sekata Apabila Kandungan Limpahan Berlaku?

Memenggal Sel Meja Sekata

Fred, sebuah meja dengan ruang pangsapuri yang berubah-ubah, menghadapi cabaran untuk menyesuaikan kandungan yang berbeza-beza dalam selnya. Apabila berhadapan dengan kandungan berlebihan, Fred mengambil jalan keluar untuk memotong satu kandungan sel untuk mengelakkan limpahan lebar jadual. Walau bagaimanapun, beliau mengesyaki bahawa penyelesaian yang lebih baik mungkin wujud apabila semua sel menyumbang secara sama rata kepada pemangkasan kandungan.

Untuk menangani kebimbangan Fred, pendekatan berikut boleh digunakan:

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

Dalam penyelesaian ini:

• Elemen colgroup diperkenalkan untuk menentukan dua lajur: satu dengan lebar 100% untuk mengambil sebahagian besar lebar jadual, dan satu dengan lebar 0% untuk bertindak sebagai sel fleksibel.
• Sel pertama mempunyai ruang putih: gaya nowrap untuk mengelakkan garis putus, limpahan teks: elipsis untuk memotong kandungan dan limpahan: tersembunyi untuk menyembunyikan kandungan tambahan.
• Maksimum -lebar: gaya 1px pada sel pertama memastikan ia hanya mengambil lebar sebanyak yang diperlukan, meninggalkan ruang yang tinggal untuk sel kedua.
• Sel kedua menggunakan ruang putih: nowrap untuk mengekalkan asalnya lebar.

Pendekatan ini memastikan bahawa apabila terdapat ruang yang mencukupi, semua sel akan memaparkan kandungan penuhnya. Walau bagaimanapun, apabila ruang tidak mencukupi, kandungan sel pertama akan dipotong terlebih dahulu, memberikan ruang tambahan kepada sel kedua untuk memaparkan kandungannya.

Atas ialah kandungan terperinci Bagaimana untuk Memotong Sel Jadual Secara Sekata Apabila Kandungan Limpahan Berlaku?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!