Bagaimanakah Saya Boleh Mencipta Sel Jadual Lebar Tetap dalam HTML dan CSS?

Sel Jadual Lebar Tetap: Membongkar Misteri

Ramai pembangun memanfaatkan jadual untuk menyusun kandungan dan data, seperti yang dibuktikan oleh populariti rangka kerja seperti jqGrid. Walau bagaimanapun, menetapkan lebar lajur jadual tetap memberikan cabaran kerana kandungan cenderung untuk mengatasi lebar yang ditentukan. Memahami fenomena ini dan mencari penyelesaian yang berkesan adalah penting.

Untuk mencapai tingkah laku yang diingini, muslihatnya terletak pada penggunaan tag, yang membolehkan untuk menentukan lebar lajur untuk semua baris. Walau bagaimanapun, untuk membuat ini berfungsi, anda juga mesti menetapkan gaya susun atur jadual: tetap pada elemen jadual, dengan itu menguatkuasakan lebar yang ketat. Selain itu, menggunakan gaya limpahan: tersembunyi pada sel jadual memastikan kandungan tidak tertumpah melepasi sempadan yang ditetapkan.

Di bawah ialah contoh coretan kod yang menunjukkan pendekatan ini:

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

table.fixed {
    table-layout: fixed;
}

table.fixed td {
    overflow: hidden;
}

Dengan melaksanakan teknik ini, anda boleh menguatkuasakan sel jadual lebar tetap dengan berkesan, memastikan reka letak anda kekal konsisten tanpa mengira kandungan panjang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sel Jadual Lebar Tetap dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!