Wie kann verhindert werden, dass Tabellenzellen mit Bindestrichen in HTML/CSS umbrochen werden?

Question

Ich weiß, dass meine Frage dieser sehr ähnlich sieht: Wie man den Textumbruch in Tabellenzellen verhindert, das war die erste Frage, die ich überprüft habe.

Ich habe eine Tabelle und in eine der Spalten werde ich eine lange Beschreibung schreiben und die nächste Spalte ist das Datum. Browser halten es für cool, Datumsspalten umzubrechen, da es sich um durch Bindestriche getrennte Zeichenfolgen handelt. Momentan habe ich so etwas:

| Beschreibung Datum |
|-------------|----------|
|. Das ist ein wirklich langer |
|. Beschreibungszelle mit vielen |. 12 |
|. Zeilen... |. |

Wie kann ich dem Browser mitteilen, dass meine Beschreibungszellen etwas kürzer sein sollen und die Datumsspalten nicht umbrochen werden sollen? In der Lösung, die ich gelesen habe, hieß es, Sie sollten verwenden, was für Leerzeichen, aber nicht für Bindestriche funktioniert.

Soll ich nicht schrumpfende Flexelemente verwenden?

---

Mit der Verkürzung der Beschreibung meine ich:

| Beschreibung Datum |
|-----------|-------|
|. Das ist ein wirklich langer |
|. Beschreibungszelle mit |
|. viele Zeilen... |. |

Answer 1

你应该为日期列使用white-space: nowrap;。当你说你想要描述单元格更短时，我不确定你的意思是什么？只需调整宽度以获得所需的结果。

Answer 2

只需在CSS中添加 white-space:nowrap，它将使所有内容都在一行上显示。请参见下方

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>