¿Cómo evitar el salto de línea en una columna de una celda de tabla (no una sola celda)?

170

¿Cómo puedo evitar saltos de línea automáticos en una columna de la tabla (no una sola celda)?

html css layout

— Steven
fuente

1

Por favor seleccione una respuesta! ... demasiado tarde ahora, supongo

— Jaeeun Lee

258

Puede usar el espacio en blanco de estilo CSS:

white-space: nowrap;

— David M
fuente

44

Quiero evitar el salto de línea en una columna de una tabla, no en una sola celda.

— Steven

11

Entonces, ¿agregarlo a cada celda de la columna?

— David M

Agregue una clase a cada celda td a la que desea que se aplique, si no desea que se aplique a cada celda de la tabla, sino solo a las específicas.

— James Black

Quiero aplicarlo a todas las celdas de la misma columna.

— Steven

77

Puede aplicar esta regla junto con el enésimo selector secundario css-tricks.com/how-nth-child-works

— Zach Lysobey

36

Para completar el bien:

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

Se utiliza para aplicar un estilo a la columna 2 de la the table_idtabla.

Esto es compatible con todos los principales navegadores, IE comenzó a admitir esto desde IE9 en adelante.

— estani
fuente

19

Usa el estilo de nowrap:

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

¡Es CSS!

— Derek Illchuk
fuente

Quiero evitar el salto de línea en todas las celdas de la misma columna.

— Steven

18

Solo agrega

style="white-space:nowrap;"

Ejemplo:

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

— Harun o Rashid
fuente

¿No se aplicaría esto a toda la tabla (es decir, TODAS las columnas) y no solo a una columna individual?

— Joshua Pinter

15

Hay algunas formas de hacer esto; ninguno de ellos es la manera fácil y obvia.

Aplicando espacios en blanco: nowrap a a <col>no funciona; solo cuatro propiedades CSS funcionan en <col>elementos: color de fondo, ancho, borde y visibilidad. IE7 y versiones anteriores solían admitir todas las propiedades, pero eso se debe a que usaron un modelo de tabla extraño. IE8 ahora coincide con todos los demás.

Entonces, ¿cómo resuelves esto?

Bueno, si puede ignorar IE (incluido IE8), puede usar el :nth-child() pseudoclase para seleccionar <td>s particulares de cada fila. Tendrá que utilizar td:nth-child(2) { white-space:nowrap; }. (Esto funciona para este ejemplo, pero se rompería si tuvieras algún espacio en filas o colspans involucrado).

Si tiene que admitir IE, entonces debe recorrer el camino más largo y aplicar una clase a todo lo <td>que quiera afectar. Es una mierda, pero son los descansos.

A la larga, hay propuestas para corregir esta falta en CSS, de modo que pueda aplicar estilos más fácilmente a todas las celdas de una columna. Podrá hacer algo como td:nth-col(2) { white-space:nowrap; }y haría lo que quiera.

— Xanthir
fuente

13

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

El nowrapatributo que creo está en desuso. Lo anterior es la forma preferida.

— Dan Breen
fuente

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 es un ejemplo de uso de la propiedad de espacio en blanco con valor nowrap, la tabla azul es la clase de la tabla, debajo de la tabla están los estilos CSS.

— Matovu Ronald
fuente

5

Pon espacios sin interrupción en tu texto en lugar de espacios normales. En Ubuntu hago esto con (Compose Key) -space-space.

— Roger Keays
fuente

5

Para aplicarlo a toda la tabla, puede colocarlo dentro de la tableetiqueta:

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

— OlgaMaciaszek
fuente