Bagaimana untuk Mengawal Lebar Lajur dengan Tepat dalam Struktur Jadual HTML Menggunakan CSS?

Menetapkan Lebar Lajur dalam Struktur Jadual

Dalam pelbagai senario pembangunan web, adalah perlu untuk mengawal lebar lajur jadual dengan tepat untuk persembahan yang optimum. Mari kita pertimbangkan jadual HTML mudah berikut yang digunakan sebagai peti masuk:

<code class="html"><table border="1">
    <tr>
        <th>From</th>
        <th>Subject</th>
        <th>Date</th>
    </tr>
</table></code>

Matlamat kami adalah untuk menetapkan lebar lajur Dari dan Tarikh kepada 15% daripada lebar halaman, manakala lajur Subjek menduduki baki 70 %. Selain itu, kami mahu jadual itu sendiri merentangi keseluruhan lebar halaman.

Untuk menangani perkara ini, kami boleh menggunakan sifat lebar CSS dalam elemen kol. Sifat ini membolehkan kami menentukan lebar lajur individu menggunakan unit berbeza, termasuk piksel atau peratusan.

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

    <!-- Table body and rows -->
</table></code>

Dalam contoh ini, kami mencipta satu set tiga elemen kol dalam bekas kumpulan kol. Setiap elemen kol mewakili lajur jadual dan diberikan lebar yang diingini menggunakan gaya CSS sebaris. Dengan menyatakan peratusan, lebar lajur menyesuaikan secara berkadar dengan lebar jadual keseluruhan.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Lebar Lajur dengan Tepat dalam Struktur Jadual HTML Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!