css tetapkan lebar lajur

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk reka bentuk gaya halaman web Salah satu fungsinya adalah untuk menetapkan lebar lajur dan pelbagai gaya jadual. Kita boleh memanfaatkan ciri ini untuk menjadikan jadual lebih cantik dan mudah dibaca. Artikel ini akan memperkenalkan cara untuk menetapkan lebar lajur jadual melalui CSS.

Pertama sekali, kita perlu memahami struktur asas jadual HTML. Jadual terdiri daripada baris dan lajur Setiap baris mengandungi satu atau lebih sel dan setiap sel boleh mengandungi teks, gambar atau elemen lain. Berikut ialah contoh jadual ringkas:

<table>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Dalam CSS, kita boleh menggunakan pemilih table untuk memilih keseluruhan jadual dan pemilih td untuk memilih setiap sel. Untuk menetapkan lebar lajur, kita perlu menggunakan atribut width, yang nilainya boleh menjadi nilai piksel, peratusan atau unit lain.

Jika anda ingin menetapkan lebar lajur setiap sel agar sama, kita boleh menggunakan gaya table-layout: fixed untuk menentukan lebar setiap lajur. Sebagai contoh, jika kita ingin menetapkan lebar setiap lajur kepada 120 piksel, kodnya adalah seperti berikut:

table {
  table-layout: fixed;
  width: 100%;
}

td {
  width: 120px;
  text-align: center;
  padding: 5px;
}

Dalam kod di atas, kami menggunakan gaya table-layout: fixed untuk menentukan lebar setiap lajur sebagai nilai tetap dan tambah keseluruhan Lebar jadual ditetapkan kepada 100%. Kemudian gunakan pemilih td untuk menetapkan lebar setiap sel kepada 120 piksel, penjajaran ke tengah dan padding kepada 5 piksel.

Jika anda ingin menetapkan lebar lajur yang berbeza, anda boleh menggunakan elemen col untuk menentukan lebar setiap lajur. Sebagai contoh, jika kita ingin menetapkan lebar lajur pertama kepada 80 piksel, lebar lajur kedua kepada 200 piksel dan lebar lajur ketiga menjadi adaptif (iaitu dilaraskan secara automatik mengikut kandungan), kod adalah seperti berikut:

<table>
  <col width="80px">
  <col width="200px">
  <col>
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>这是一列比较长的数据，它会自动调整宽度以适应内容。</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Dalam kod di atas, kami menggunakan elemen col untuk menentukan lebar setiap lajur masing-masing sebagai 80 piksel, 200 piksel dan adaptif. Lebar lajur ketiga tidak ditentukan, jadi lebarnya secara automatik menyesuaikan diri dengan kandungan.

Jika anda perlu menukar warna setiap baris lain, anda boleh menggunakan unsur pseudo CSS nth-child untuk menetapkan warna baris ganjil dan genap. Contohnya, tetapkan warna latar belakang baris bernombor ganjil kepada kelabu terang dan warna latar belakang baris bernombor genap kepada putih Kodnya adalah seperti berikut:

tr:nth-child(even) {
  background-color: #fff;
}

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

Untuk meringkaskan, tetapkan lebar lajur dan gaya. jadual melalui CSS boleh menjadikan jadual lebih cantik , mudah dibaca dan meningkatkan pengalaman pengguna. Di atas adalah beberapa kaedah dan teknik asas untuk menetapkan lebar lajur jadual dengan CSS.

Atas ialah kandungan terperinci css tetapkan lebar lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!