Comment empêcher le saut de ligne dans une colonne d'une cellule de tableau (et non dans une seule cellule) ?

Question

Comment empêcher les sauts de ligne automatiques dans une colonne de tableau (et non dans une seule cellule) ?

Answer 1

Vous pouvez utiliser le style CSS espace blanc :

white-space: nowrap;

Answer 2

Pour l'achèvement :

#table_id td:nth-child(2)  {white-space: nowrap;}

Est utilisé pour appliquer un style à la colonne 2 de la page the table_id table.

Cette fonction est prise en charge par tous les principaux navigateurs. IE a commencé à la prendre en charge à partir de IE9.

Answer 3

Utilisez le style nowrap :

<td style="white-space:nowrap;">...</td>

C'est CSS !

Answer 4

Il existe plusieurs façons de procéder, mais aucune n'est facile ou évidente.

Appliquer white-space:nowrap à un fichier <col> ne fonctionnera pas ; seules quatre propriétés CSS fonctionnent sur <col> la couleur d'arrière-plan, la largeur, la bordure et la visibilité. IE7 et les versions antérieures prenaient en charge toutes les propriétés, mais c'est parce qu'ils utilisaient un modèle de tableau étrange. IE8 s'aligne désormais sur tous les autres.

Alors, comment résoudre ce problème ?

Eh bien, si vous pouvez ignorer IE (y compris IE8), vous pouvez utiliser la fonction :nth-child() pseudoclasse pour sélectionner des <td> de chaque rangée. Vous utiliseriez td:nth-child(2) { white-space:nowrap; } . (Cela fonctionne pour cet exemple, mais cela ne fonctionnerait pas si vous aviez des rowspans ou des colspans).

Si vous devez prendre en charge IE, alors vous devez prendre le chemin le plus long et appliquer une classe à chaque <td> que vous voulez affecter. Ça craint, mais c'est la vie.

À long terme, il existe des propositions visant à corriger ce manque dans les CSS, de sorte que vous puissiez plus facilement appliquer des styles à toutes les cellules d'une colonne. Vous serez en mesure de faire quelque chose comme td:nth-col(2) { white-space:nowrap; } et ça ferait ce que vous voulez.

Answer 5

<td style="white-space: nowrap">

Le site nowrap Je crois que cet attribut est déprécié. La méthode ci-dessus est la méthode préférée.