Come evitare un’interruzione di riga in una colonna di una cella di tabella (non una singola cella)?

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

Puoi utilizzare lo spazio bianco di stile CSS:

white-space: nowrap; 

Per fine di completamento:

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

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

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

Usa lo stile nowrap:

 ... 

È CSS!

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

Applicare white-space: nowrap a un

non funzionerà; solo quattro proprietà CSS funzionano sugli elementi

– background-color, width, border e visibility. IE7 e precedenti utilizzati per supportare tutte le proprietà, ma è perché hanno usato uno strano modello di tabella. IE8 ora corrisponde a tutti gli altri.

Quindi, come risolvi questo?

Bene, se puoi ignorare IE (incluso IE8), puoi usare la :nth-child() per selezionare

s particolari da ogni riga. Dovresti usare td:nth-child(2) { white-space:nowrap; } td:nth-child(2) { white-space:nowrap; } . (Questo funziona per questo esempio, ma si interromperebbe se si dovessero verificare spazipazienti o colspans.)

Se devi supportare IE, devi fare il giro e applicare una class a ogni

che vuoi influenzare. Fa schifo, ma loro 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 come td:nth-col(2) { white-space:nowrap; } td:nth-col(2) { white-space:nowrap; } e farebbe quello che vuoi.

  

L’attributo nowrap credo sia deprecato. Quanto sopra è il modo preferito.

Metti spazi senza interruzioni nel testo anziché spazi normali. Su Ubuntu lo faccio con (Compose Key) -space-space.

Per applicarlo all’intera tabella, puoi posizionarlo all’interno del tag table :

  
My name is good
table.blueTable td, table.blueTable th {border: 1px solid #AAAAAA;padding: 3px 2px;white-space: nowrap;text-align: left; }

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