Bagaimana untuk menetapkan lebar jadual (jadual) dalam css

Dalam reka bentuk susun atur halaman web, jadual sering digunakan untuk menyusun data. Apabila menggunakan jadual, untuk memastikan keindahan dan kebolehbacaan halaman, kita perlu menetapkan lebar jadual. Berikut akan memperkenalkan cara menggunakan CSS untuk menetapkan lebar jadual (jadual).

1. Gunakan atribut lebar dalam CSS

Terdapat atribut lebar dalam CSS yang boleh digunakan untuk menetapkan lebar elemen. Dalam jadual, kita juga boleh menggunakan sifat ini untuk menetapkan lebar jadual. Kaedah khusus adalah seperti berikut:

1. Dalam helaian gaya CSS, gunakan pemilih "jadual" untuk memilih elemen jadual
2. Gunakan atribut lebar untuk menentukan nilai lebar jadual (boleh piksel atau peratusan).

Sebagai contoh, kod berikut menetapkan lebar jadual kepada 400px:

<table style="width: 400px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dalam kod di atas, kami menetapkan atribut "lebar" bagi elemen jadual kepada "400px ”, supaya lebar keseluruhan jadual dihadkan kepada 400 piksel. Walaupun kandungan dalam jadual melebihi 400 piksel, jadual tidak akan diregangkan dan bar skrol akan dipaparkan.

Jika kita menetapkan atribut lebar kepada nilai peratusan, maka lebar jadual akan berkadar dengan lebar elemen induk. Sebagai contoh, kod berikut menetapkan lebar jadual kepada 50% daripada lebar elemen induk:

<div>
  <table style="width: 50%;">
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </table>
</div>

Dalam kod di atas, kami menetapkan atribut "lebar" elemen jadual kepada " 50%" supaya jadual Lebar akan menyesuaikan secara automatik kepada lebar elemen induknya, menghasilkan kesan reka bentuk responsif yang lebih baik.

2 Gunakan atribut min-width dan max-width dalam CSS

Selain menggunakan atribut width untuk menetapkan lebar jadual, kita juga boleh menggunakan atribut min-width dan max dalam CSS -width atribut untuk menetapkan lebar minimum dan maksimum untuk jadual. Penggunaan sifat ini adalah serupa dengan sifat lebar, anda hanya perlu menukar nama harta dengan sewajarnya.

Sebagai contoh, kita boleh menetapkan nilai lebar minimum untuk jadual untuk mengelakkan jadual daripada menjadi terlalu kecil dan menjejaskan reka letak. Berikut ialah contoh:

<table style="min-width: 200px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dalam kod di atas, kami menetapkan atribut "lebar min" bagi elemen jadual kepada "200px", supaya walaupun terdapat sedikit kandungan dalam jadual, lebar jadual adalah Tidak lebih kecil daripada 200 piksel.

Begitu juga, kita juga boleh menetapkan nilai lebar maksimum untuk jadual untuk mengelakkan jadual daripada menjadi terlalu besar dan menjejaskan reka letak halaman. Berikut ialah contoh:

<table style="max-width: 800px;">
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
  <tr>
    <td>内容3</td>
    <td>内容4</td>
  </tr>
</table>

Dalam kod di atas, kami menetapkan atribut "max-width" elemen jadual kepada "800px", supaya walaupun terdapat banyak kandungan dalam jadual, lebar jadual tidak akan melebihi 800 piksel.

Ringkasan:

Di atas adalah beberapa cara untuk menetapkan lebar jadual (jadual) menggunakan CSS. Dalam aplikasi laman web sebenar, kita perlu memilih kaedah tetapan lebar yang sesuai mengikut situasi sebenar untuk mencapai kesan halaman yang terbaik.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar jadual (jadual) dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!