Bagaimana untuk menghalang sel jadual dengan sengkang daripada dibungkus dalam HTML/CSS?

Question

Saya tahu soalan saya kelihatan sangat serupa dengan soalan ini: Bagaimana untuk menghalang pembalut teks dalam sel jadual, ini adalah soalan pertama yang saya semak.

Saya mempunyai jadual dan dalam salah satu lajur saya akan menulis penerangan yang panjang dan lajur seterusnya ialah tarikh. Penyemak imbas berpendapat adalah bagus untuk membungkus lajur tarikh kerana ia adalah rentetan yang dipisahkan sempang. Pada masa ini saya mempunyai sesuatu seperti ini:

|Tarikh |
|----------------------------|----------|
|. Ini sungguh panjang |
|. sel perihalan dengan banyak |
|. baris... |

Bagaimanakah saya memberitahu penyemak imbas bahawa saya mahu sel penerangan saya lebih pendek sedikit dan lajur tarikh tidak dibalut. Dalam penyelesaian yang saya baca, ia mengatakan anda harus menggunakan , yang berfungsi untuk ruang tetapi bukan sempang.

Perlukah saya menggunakan elemen lentur yang tidak mengecut?

---

Dengan memendekkan huraian, saya maksudkan:

|Tarikh |
|---------------------------------------|---------------------|
|. Ini adalah 12-2022 |
|
|. banyak baris... |

Answer 1

Anda harus menggunakan white-space: nowrap; untuk lajur tarikh. Saya tidak pasti apa yang anda maksudkan apabila anda mengatakan anda mahu sel penerangan menjadi lebih pendek? Hanya laraskan lebar untuk mendapatkan hasil yang diingini.

Answer 2

Hanya tambahkan white-space:nowrap dalam CSS anda dan ia akan menjadikan semuanya kelihatan pada satu baris. Lihat di bawah

table {
  border-collapse: collapse;
  width: 100px;
}

td {
  border: 1px solid gray;
  padding: 0.25rem 0.5rem;
}

td:last-child {
  white-space: nowrap;
}

<table>
  <tr>
    <td>Description</td>
    <td>Date</td>
  </tr>
  <tr>
    <td>This is a really long description cell with many lines</td>
    <td>2022-10-12</td>
  </tr>
</table>