Bagaimana untuk Memotong Sel Jadual Secara Sekata Semasa Memaksimumkan Keterlihatan Kandungan?

Cara Memotong Sel Jadual sambil Memaksimumkan Keterlihatan Kandungan

Memangkas sel jadual boleh menjadi teknik yang berguna untuk mengoptimumkan susun atur jadual dan memastikan kandungan itu dipaparkan dengan jelas dalam lebar yang tersedia. Walau bagaimanapun, ia boleh mengecewakan apabila sel dengan lebar kandungan yang berbeza-beza dipenggal secara tidak sekata.

Dalam contoh yang diberikan, sel dengan lebih banyak kandungan dipotong manakala sel lain mengekalkan lebar penuhnya. Untuk menyelesaikan isu ini, kita boleh menggunakan teknik CSS untuk mengagihkan ruang dengan lebih sekata antara sel.

Penyelesaian melibatkan pembungkusan sel dalam elemen colgroup dengan lebar lajur yang ditentukan. Kami menetapkan lebar lajur pertama kepada 100% dan lajur kedua kepada 0%. Ini memastikan bahawa lajur pertama mengambil sebanyak mungkin ruang manakala lajur kedua kekal tersembunyi.

Dalam sel, kami menggunakan gaya CSS untuk mengawal limpahan teks. Kami menetapkan ruang putih: nowrap untuk mengelakkan pembalut teks dan limpahan teks: elipsis untuk memotong sebarang teks berlebihan. Selain itu, kami mengehadkan lebar maksimum lajur pertama kepada 1px untuk mengelakkannya daripada meluas melebihi ruang yang tersedia.

Dengan menggabungkan teknik ini, kami mencapai reka letak jadual di mana sel melimpah secara sekata, dengan hanya kandungan yang diperlukan sedang dipotong. Ini membolehkan pengagihan ruang yang lebih seimbang dan memastikan bahawa sebanyak mungkin kandungan boleh dilihat dalam jadual.

Kod CSS:

<code class="css"><style>
table {
  width: 100%;
}

colgroup {
  col width="100%";
  col width="0%";
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 1px;  /* Restrict the width of the first column to 1px */
}
</style></code>

Atas ialah kandungan terperinci Bagaimana untuk Memotong Sel Jadual Secara Sekata Semasa Memaksimumkan Keterlihatan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!