Bagaimana untuk Menghalang Peluasan Lebar Lajur dalam Jadual HTML?

Menghalang Peluasan Lebar Lajur dalam Jadual

Ramai pembangun sering menghadapi cabaran apabila bekerja dengan jadual: memastikan bahawa lebar lajur kekal malar , tanpa mengira panjang teks dalam selnya. Dalam artikel ini, kami akan menangani isu ini dan menyediakan penyelesaian untuk menetapkan lebar lajur sambil melumpuhkan sebarang pengembangan.

Memahami Masalah

Secara lalai, apabila teks melebihi lebar sel jadual yang ditentukan, lajur yang mengandungi mengembang untuk menampung limpahan. Tingkah laku ini bercanggah dengan ketekalan yang diingini dalam lebar lajur.

Penyelesaian: Kestabilan Lebar Lajur

Terdapat dua sifat CSS yang penting untuk menyelesaikan masalah ini:

• susun atur jadual: tetap: Sifat ini menetapkan mod reka letak jadual untuk tetap, memastikan bahawa lebar lajur kekal konsisten tanpa mengira kandungan sel.
• lebar: Sifat ini menetapkan lebar eksplisit lajur.

Melaksanakan sifat ini , bersama-sama dengan penggayaan CSS yang betul untuk sempadan dan lebar meja, mencapai yang dimaksudkan tingkah laku:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

Contoh:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Kod ini mengekalkan lebar lajur 100px untuk kedua-dua lajur, walaupun apabila teks dalam sel pengepala kedua ialah jauh lebih lama. Limpahan: sifat tersembunyi menyembunyikan sebarang teks berlebihan yang sebaliknya akan menonjol melepasi sempadan sel.

Atas ialah kandungan terperinci Bagaimana untuk Menghalang Peluasan Lebar Lajur dalam Jadual HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!