Comment éviter les sauts de ligne dans une colonne d'une cellule de tableau (pas une seule cellule)?

170

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

html css layout Steven
la source
1
Veuillez sélectionner une réponse! ... trop tard maintenant je suppose
Jaeeun Lee

Réponses:

258

Vous pouvez utiliser l'espace blanc de style CSS:

white-space: nowrap;
David M
la source
4
Je souhaite éviter les sauts de ligne dans une colonne d'un tableau, pas dans une seule cellule.
Steven
11
Alors, ajoutez-le à chaque cellule de la colonne?
David M
Ajoutez une classe à chaque cellule td à laquelle vous souhaitez que cela s'applique, si vous ne voulez pas qu'elle s'applique à toutes les cellules du tableau, mais uniquement à des cellules spécifiques.
James Black
Je veux l'appliquer à toutes les cellules de la même colonne.
Steven
7
Vous pouvez appliquer cette règle avec le nième sélecteur d'enfant css-tricks.com/how-nth-child-works
Zach Lysobey
36

Par souci de finition:

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

Est utilisé pour appliquer un style à la 2 colonne du the table_idtableau.

Ceci est pris en charge par tous les principaux navigateurs, IE a commencé à le prendre en charge à partir d'IE9.

estani
la source
19

Utilisez le style nowrap:

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

C'est CSS!

Derek Illchuk
la source
Je souhaite éviter les sauts de ligne dans toutes les cellules de la même colonne.
Steven
18

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>
Harun ou Rashid
la source
Cela ne s'appliquerait-il pas à l'ensemble du tableau (c'est-à-dire à TOUTES les colonnes) et pas seulement à une colonne individuelle?
Joshua Pinter le
15

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 <col>éléments: 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'elles utilisaient un modèle de table étrange. IE8 correspond désormais à tout le monde.

Alors, comment résolvez-vous cela?

Eh bien, si vous pouvez ignorer IE (y compris IE8), vous pouvez utiliser la :nth-child()pseudoclasse pour sélectionner des <td>s particuliers de chaque ligne. Vous utiliseriez td:nth-child(2) { white-space:nowrap; }. (Cela fonctionne pour cet exemple, mais se briserait si vous aviez des lignes ou des colspans impliqués.)

Si vous devez prendre en charge IE, vous devez faire le long chemin et appliquer une classe à tout ce <td>que vous souhaitez affecter. Ça craint, mais ce sont les pauses.

À long terme, il existe des propositions pour corriger ce manque de CSS, afin que vous puissiez 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.

Xanthir
la source
13 
<td style="white-space: nowrap">

L' nowrapattribut que je crois est obsolète. Ce qui précède est la méthode préférée.

Dan Breen
la source
6 
<table class="blueTable">
  <tr>
     <td>My name is good</td>
   </tr>
</table> 
<style>   
    table.blueTable td,
    table.blueTable th {
        white-space: nowrap;
        /* non-question related further styling */
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
        text-align: left;
    }
</style>

Ceci est un exemple d'utilisation de la propriété d'espace blanc avec la valeur nowrap, le bluetable est la classe du tableau, sous le tableau se trouvent les styles CSS.

Matovu Ronald
la source
5

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

Roger Keays
la source
5

Pour l'appliquer à l'ensemble du tableau, vous pouvez le placer dans la tablebalise:

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

OlgaMaciaszek
la source