Como evitar quebras de linha em uma coluna de uma célula da tabela (não em uma única célula)?

170

Como impedir quebras de linha automáticas em uma coluna da tabela (não em uma única célula)?

html css layout

— Steven
fonte

1

Por favor selecione uma resposta! ... tarde demais agora, suponho #

— Jaeeun Lee 17/12/18

258

Você pode usar o espaço em branco no estilo CSS:

white-space: nowrap;

— David M
fonte

4

Quero impedir quebras de linha em uma coluna de uma tabela, não em uma única célula.

— Steven

11

Então, adicione-o a todas as células da coluna?

— David M

Adicione uma classe a todas as células td às quais você deseja aplicar, se não quiser que ela seja aplicada a todas as células da tabela, mas apenas às específicas.

— James Black

Quero aplicá-lo a todas as células da mesma coluna.

— Steven

7

Você pode aplicar esta regra, juntamente com os enésimo seletor filho css-tricks.com/how-nth-child-works

— Zach Lysobey

36

Para fins de conclusão:

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

É usado para aplicar um estilo à coluna 2 da the table_idtabela.

Isso é suportado por todos os principais navegadores; o IE começou a oferecer suporte a partir do IE9 em diante.

— estani
fonte

19

Use o estilo nowrap:

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

É CSS!

— Derek Illchuk
fonte

Quero impedir a quebra de linha em todas as células da mesma coluna.

— Steven

18

Basta adicionar

style="white-space:nowrap;"

Exemplo:

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

— Harun Or Rashid
fonte

Isso não se aplicaria a toda a tabela (ou seja, TODAS as colunas) e não apenas a uma coluna individual?

— Joshua Pinter

15

Há algumas maneiras de fazer isto; nenhum deles é o caminho fácil e óbvio.

Aplicar espaço em branco: o nowrap para a <col>não funcionará; apenas quatro propriedades CSS funcionam em <col>elementos - cor de fundo, largura, borda e visibilidade. O IE7 e versões anteriores costumavam oferecer suporte a todas as propriedades, mas isso ocorre porque eles usavam um modelo de tabela estranho. O IE8 agora corresponde a todos os outros.

Então, como você resolve isso?

Bem, se você pode ignorar o IE (incluindo o IE8), pode usar o :nth-child()pseudoclasse para selecionar <td>s específicos de cada linha. Você usaria td:nth-child(2) { white-space:nowrap; }. (Isso funciona para este exemplo, mas seria interrompido se você tivesse algum espaço de linha ou espaço de cores envolvido.)

Se você precisa dar suporte ao IE, precisa percorrer o caminho mais longo e aplicar uma classe a tudo <td>que deseja afetar. É péssimo, mas são os intervalos.

A longo prazo, existem propostas para corrigir essa falta de CSS, para que você possa aplicar estilos mais facilmente a todas as células em uma coluna. Você será capaz de fazer algo assim td:nth-col(2) { white-space:nowrap; }e faria o que você quiser.

— Xanthir
fonte

13

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

O nowrapatributo que acredito ser preterido. O acima é o caminho preferido.

— 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>

Este é um exemplo de uso da propriedade espaço em branco com valor nowrap, a tabela azul é a classe da tabela, abaixo da tabela estão os estilos CSS.

— Matovu Ronald
fonte

5

Coloque espaços sem quebra no seu texto em vez de espaços normais. No Ubuntu, faço isso com (Compose Key) -space-space.

— Roger Keays
fonte

5

Para aplicá-lo a toda a tabela, você pode colocá-lo na tabletag:

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

— OlgaMaciaszek
fonte