Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Sel Jadual Membungkus Kandungan dalam HTML?

Bagaimana untuk Membuat Sel Jadual Membungkus Kandungan dalam HTML?

Linda Hamilton
Linda Hamiltonasal
2024-10-27 14:24:02764semak imbas

How to Make Table Cells Wrap Content in HTML?

Mengatasi Isu Pembalut Sel Jadual

Dalam HTML, sel jadual () biasanya tidak membungkus kandungannya secara lalai. Untuk memaksa mereka membalut, kita perlu mengubah suai gaya CSS.

Penyelesaian:

Untuk memastikan kandungan sel jadual dibalut, tambah gaya berikut:

  • CSS untuk jadual: Tetapkan reka letak jadual: tetap; pada elemen jadual untuk mentakrifkan lebar lajur dan menghalang kandungan daripada regangan.
  • CSS untuk sel jadual: Guna word-wrap: break-word; untuk memecahkan perkataan panjang dalam sel.

Contoh Kod:

<code class="css">table {
  border-collapse: collapse;
  table-layout: fixed;
  width: <table_width>;
}

table td {
  border: 1px solid #ccc;
  width: <td_width>;
  word-wrap: break-word;
}</code>

Contoh HTML:

<code class="html"><table>
  <tr>
    <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
    <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</td>
  </tr>
</table></code>

Dengan menggunakan peraturan CSS ini, sel jadual akan membalut kandungannya dan mengelakkan regangan. Selain itu, menetapkan jadual dan lebar sel memastikan kandungan sesuai dalam dimensi yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Sel Jadual Membungkus Kandungan dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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