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

Linda Hamilton
Lepaskan: 2024-10-30 07:51:27
asal
311 orang telah melayarinya

How to Truncate Table Cells Evenly When Content Overflow Occurs?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!