Bagaimana untuk Menentukan Lebar Lajur Jadual Menggunakan HTML dan CSS?

Menentukan Lebar Lajur Jadual dalam HTML dan CSS

Untuk menetapkan lebar lajur dalam jadual yang disediakan:

Sifat lebar CSS:

Gunakan sifat lebar dalam CSS untuk menentukan lebar setiap lajur jadual. Anda boleh menentukan nilai dalam piksel (px) atau sebagai peratusan (%) daripada lebar elemen induk.

Contoh:

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

Penanda HTML :

<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>
  <!-- Insert table headers, body, and rows here -->
</table></code>

Penyelesaian ini memberikan lebar 15%, 70% dan 15% kepada lajur "Daripada", "Subjek" dan "Tarikh". Selain itu, ia memastikan jadual menjangkau seluruh lebar halaman.

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