Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menentukan Lebar Lajur Jadual Menggunakan HTML dan CSS?

Bagaimana untuk Menentukan Lebar Lajur Jadual Menggunakan HTML dan CSS?

Patricia Arquette
Lepaskan: 2024-10-29 19:19:29
asal
766 orang telah melayarinya

How to Define Table Column Widths Using HTML and 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan