web-dev-qa-db-fra.com

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

Comment puis-je empêcher les sauts de ligne automatiques dans une colonne de tableau (pas une seule cellule)?

htmlcsslayout
149
Steven

Vous pouvez utiliser les espaces blancs de style CSS:

white-space: nowrap;
228
David M

Pour l'achèvement:

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

Est utilisé pour appliquer un style aux 2 colonnes de the table_id table.

Ceci est supporté par tous les principaux navigateurs, IE a commencé à le supporter depuis IE9 et les versions ultérieures.

35
estani

Utilisez le style nowrap:

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

C'est CSS!

18
Derek Illchuk

Il y a quelques façons de le faire; Aucun d'entre eux n'est le moyen facile et évident.

Appliquer un espace blanc: nowrap à un <col> Ne fonctionnera pas; seules quatre propriétés CSS fonctionnent sur les éléments <col> - couleur d'arrière-plan, largeur, bordure et 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 table étrange. IE8 correspond maintenant à tout le monde.

Alors, comment résolvez-vous cela?

Eh bien, si vous pouvez ignorer IE (y compris IE8), vous pouvez utiliser la pseudo-classe :nth-child() _ pour sélectionner des caractères <td> Particuliers dans chaque ligne. use td:nth-child(2) { white-space:nowrap; }. (Cela fonctionne pour cet exemple, mais se briserait si vous aviez des champs de lignes ou des colspans impliqués.)

Si vous devez prendre en charge Internet Explorer, alors vous devez faire tout ce qui est en votre pouvoir et appliquer une classe à chaque <td> Que vous souhaitez affecter. C'est nul, mais ce sont les pauses.

À long terme, il existe des propositions pour remédier à ce manque en CSS, afin de pouvoir appliquer plus facilement des styles à toutes les cellules d'une colonne. Vous pourrez faire quelque chose comme td:nth-col(2) { white-space:nowrap; } et cela ferait ce que vous voulez.

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

L'attribut nowrap est, selon moi, obsolète. Ce qui précède est le moyen préféré.

12
Dan Breen

Il suffit d'ajouter

style="white-space:nowrap;"

Exemple:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
9
Harun Or Rashid

Mettez des espaces insécables dans votre texte au lieu des espaces normaux. Sur Ubuntu, je le fais avec (Compose Key) -space-space.

5
Roger Keays

Pour l'appliquer à la table entière, vous pouvez le placer dans la balise table:

<table style="white-space:nowrap;">

4
OlgaMaciaszek