Bagaimana untuk Menetapkan Lebar Maks untuk Sel Jadual Menggunakan Peratusan?

Menetapkan Lebar Maks untuk Sel Jadual dengan Peratusan

Menetapkan kekangan lebar maksimum menggunakan peratusan untuk sel jadual boleh menjadi rumit. Pertimbangkan contoh berikut:

<table>
  <tr>
    <td>Test</td>
    <td>A long string blah blah blah</td>
  </tr>
</table>

<style>
  td {
    max-width: 67%;
  }
</style>

Dalam kes ini, tetapan lebar maks tidak berkuat kuasa. Jadi, bagaimanakah kita boleh mencapai ini menggunakan peratusan?

Penyelesaian

Penyelesaian melibatkan penggunaan sifat susun atur jadual pada elemen jadual. Dengan menetapkannya kepada ditetapkan, kita boleh mengubah saiz sel jadual secara berkadar:

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

Peraturan CSS ini memastikan lebar jadual menggunakan keseluruhan ruang yang tersedia dan sel jadual melaraskan lebarnya sewajarnya. Peratusan tetapan lebar maksimum untuk sel individu kini akan dihormati.

Contoh:

<table>

Dengan menambahkan susun atur jadual: tetap, had lebar maksimum untuk sel jadual kedua digunakan dengan berkesan, mengurangkan lebarnya berbanding dengan jadual induk.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Lebar Maks untuk Sel Jadual Menggunakan Peratusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!