Comment empêcher les cellules de tableau avec des tirets de s'enrouler en HTML/CSS ?

Question

Je sais que ma question ressemble beaucoup à celle-ci : Comment empêcher le retour à la ligne du texte dans les cellules d'un tableau ? C'est la première que j'ai vérifiée.

J'ai un tableau et dans l'une des colonnes j'écrirai une longue description et la colonne suivante est la date. Les navigateurs pensent que c'est sympa d'envelopper les colonnes de date car ce sont des chaînes séparées par des tirets. Actuellement, j'ai quelque chose comme ceci :

|
|----------------------------|----------|
| C'est un très long | 2022-10- |
| cellule de description avec plusieurs |
| lignes... |</pré>
<p>Comment indiquer au navigateur que je souhaite que mes cellules de description soient légèrement plus courtes et que la colonne de date ne soit pas renvoyée à la ligne. Dans la solution que j'ai lue, il est indiqué que vous devez utiliser <code><td wrap="nowrap"></code>, qui fonctionne pour les espaces mais pas pour les tirets. </p>
<p>Dois-je utiliser des éléments flexibles qui ne rétrécissent pas ? </p>
<heure />
<p>En raccourcissant la description, je veux dire : </p>
<pre class="brush:php;toolbar:false;">|
|--------------------------|--------------------------|
| C'est un très long | 2022-10-12 |
cellule de description avec |
| plusieurs lignes... |

Answer 1

Vous devez utiliser white-space: nowrap; pour les colonnes de date. Je ne suis pas sûr de ce que vous voulez dire lorsque vous dites que vous souhaitez que les cellules de description soient plus courtes ? Ajustez simplement la largeur pour obtenir le résultat souhaité.

Answer 2

Ajoutez simplement white-space:nowrap dans votre CSS et tout apparaîtra sur une seule ligne. Voir ci-dessous

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>