Bagaimanakah Saya Boleh Mencapai Lebar Sel Jadual Tetap dalam HTML Menggunakan `` dan CSS?

Lebar Sel Jadual Tetap - Membongkar Keajaiban

Ramai pembangun web masih menggunakan jadual untuk mengatur data dan kawalan, seperti yang ditunjukkan oleh jqGrid. Walau bagaimanapun, keupayaan jqGrid untuk menguatkuasakan lebar lajur tetap, walaupun kandungan sel berbeza-beza, memberikan teka-teki yang menarik.

Rahsianya terletak pada penggunaan tag, yang membolehkan pembangun mentakrifkan penggayaan seluruh jadual untuk lajur. Dengan menetapkan gaya susun atur jadual:tetap pada elemen dan menentukan gaya limpahan:tersembunyi untuk sel, jadual menggunakan reka letak tetap, menghalang sel daripada mengembang melebihi lebar yang ditentukan.

Sebagai contoh, pertimbangkan kod HTML berikut:

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

Bersempena dengan kod ini, CSS berikut memastikan susun atur jadual tetap dan menghalang pengembangan sel:

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Dengan menggunakan ini pendekatan, pembangun boleh mencapai kawalan tepat ke atas lebar sel jadual, memastikan penampilan yang konsisten dan teratur walaupun kandungan sel berbeza-beza.

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