Bagaimana untuk Menetapkan Lebar Lajur dalam Jadual untuk Reka Letak Gaya Peti Masuk?

Menetapkan Lebar Lajur Jadual

Mencipta jadual yang menarik secara visual dan berfungsi selalunya melibatkan penyesuaian lebar lajurnya. Dalam kes jadual gaya peti masuk asas, matlamatnya adalah untuk menetapkan lebar khusus untuk lajur "Daripada," "Subjek" dan "Tarikh", memastikan ia menduduki peratusan lebar halaman yang berbeza.

Untuk mencapai penyesuaian ini, CSS sifat lebar digunakan bersama dengan elemen kol. Elemen ini berada dalam elemen colgroup, yang mentakrifkan reka letak lajur. Dengan memberikan nilai lebar pada setiap lajur, kami boleh mengawal saiznya.

Berikut ialah contoh menggunakan atribut CSS sebaris:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Coretan kod ini menetapkan jadual untuk mengisi keseluruhan lebar halaman , sambil mentakrifkan tiga lajur dengan peratusan tertentu:

• "Dari": 15% daripada lebar halaman
• "Subjek": 70% daripada lebar halaman
• "Tarikh": 15% daripada lebar halaman

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Lebar Lajur dalam Jadual untuk Reka Letak Gaya Peti Masuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!