Come prevenire l'interruzione di riga in una colonna di una cella di tabella (non una singola cella)?

170

Come posso impedire le interruzioni di riga automatiche in una colonna della tabella (non una singola cella)?

html css layout

— Steven
fonte

1

Seleziona una risposta! ... troppo tardi ora suppongo

— Jaeeun Lee il

258

Puoi usare lo spazio bianco in stile CSS:

white-space: nowrap;

— David M
fonte

4

Voglio impedire l'interruzione di riga in una colonna di una tabella, non in una singola cella.

— Steven,

11

Quindi aggiungerlo a ogni cella nella colonna?

— David M,

Aggiungi una classe a ogni cella td a cui vuoi applicare questa, se non vuoi che venga applicata a ogni cella della tabella, ma solo a quelle specifiche.

— James Black,

Voglio applicarlo a tutte le celle della stessa colonna.

— Steven,

7

Puoi applicare questa regola insieme all'ennesimo selettore figlio css-tricks.com/how-nth-child-works

— Zach Lysobey

36

Per amor di completamento:

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

Viene utilizzato per applicare uno stile alla colonna 2 della the table_idtabella.

Questo è supportato da tutti i principali browser, IE ha iniziato a supportarlo da IE9 in poi.

— estani
fonte

19

Usa lo stile nowrap:

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

È CSS!

— Derek Illchuk
fonte

Voglio impedire l'interruzione di riga in tutte le celle della stessa colonna.

— Steven,

18

Basta aggiungere

style="white-space:nowrap;"

Esempio:

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

— Harun o Rashid
fonte

Questo non si applicherebbe all'intera tabella (ovvero TUTTE le colonne) e non solo a una singola colonna?

— Joshua Pinter,

15

Ci sono alcuni modi per farlo; nessuno di questi è il modo più semplice e ovvio.

Applicazione di spazi bianchi: nowrap a a <col>non funzionerà; solo quattro proprietà CSS funzionano sugli <col>elementi: colore di sfondo, larghezza, bordo e visibilità. IE7 e precedenti erano soliti supportare tutte le proprietà, ma questo perché usavano uno strano modello di tabella. IE8 ora corrisponde a tutti gli altri.

Quindi, come lo risolvi?

Bene, se puoi ignorare IE (incluso IE8), puoi usare la :nth-child()pseudoclasse per selezionare particolari <td>s da ogni riga. Useresti td:nth-child(2) { white-space:nowrap; }. (Questo funziona per questo esempio, ma si spezzerebbe se si dovessero verificare file di righe o colonne).

Se devi supportare IE, devi fare molto e applicare una classe a tutti <td>quelli che vuoi influenzare. Fa schifo, ma sono le pause.

A lungo termine, ci sono proposte per correggere questa mancanza nei CSS, in modo da poter applicare più facilmente gli stili a tutte le celle di una colonna. Sarai in grado di fare qualcosa del genere td:nth-col(2) { white-space:nowrap; }e farebbe quello che vuoi.

— Xanthir
fonte

13

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

L' nowrapattributo credo sia deprecato. Quanto sopra è il modo preferito.

— Dan Breen
fonte

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>

Questo è un esempio di utilizzo della proprietà dello spazio bianco con valore nowrap, il bluetable è la classe della tabella, sotto la tabella ci sono gli stili CSS.

— Matovu Ronald
fonte

5

Inserisci spazi non interrompibili nel testo anziché spazi normali. Su Ubuntu lo faccio con (Compose Key) -space-space.

— Roger Keays
fonte

5

Per applicarlo all'intera tabella, puoi inserirlo nel tabletag:

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

— OlgaMaciaszek
fonte