Bagaimanakah saya boleh menetapkan lebar lajur jadual menggunakan CSS untuk mencapai susun atur tertentu dengan peratusan berbeza untuk setiap lajur?

Menetapkan Lebar Lajur Jadual

Tutorial ini memberikan panduan tentang menetapkan lebar lajur jadual untuk mencapai reka letak yang diingini. Pertimbangkan jadual berikut digunakan sebagai peti masuk:

<table>
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table>

Matlamatnya adalah untuk memperuntukkan 15% daripada lebar halaman kepada kedua-dua lajur "Daripada" dan "Tarikh", sambil memperuntukkan 70% kepada "Subjek" lajur. Selain itu, jadual hendaklah merangkumi keseluruhan lebar halaman.

Menggunakan Sifat lebar CSS

Untuk mencapai reka letak ini, sifat CSS lebar elemen col boleh digunakan . Sifat ini membenarkan untuk menentukan lebar lajur dalam piksel atau sebagai peratusan lebar elemen induk.

Pertimbangkan contoh berikut dengan atribut gaya sebaris:

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;"></col>
       <col span="1" style="width: 70%;"></col>
       <col span="1" style="width: 15%;"></col>
    </colgroup>

    <thead>
        <tr>
            <th>From</th>
            <th>Subject</th>
            <th>Date</th>
        </tr>
    </thead>

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

Dengan menyatakan lebar ini, jadual akan menduduki lebar halaman penuh, dan lajur akan bersaiz berkadar mengikut peratusan yang ditentukan. Pendekatan ini membolehkan lebar lajur yang fleksibel, walaupun lebar halaman berubah, memastikan reka letak yang konsisten.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menetapkan lebar lajur jadual menggunakan CSS untuk mencapai susun atur tertentu dengan peratusan berbeza untuk setiap lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!