Bagaimanakah saya boleh menetapkan lebar lajur jadual menggunakan CSS untuk mencapai susun atur tertentu dengan peratusan berbeza untuk setiap lajur?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-10-27 14:37:01

asal

457 orang telah melayarinya

How can I set the width of table columns using CSS to achieve a specific layout with different percentages for each column?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!