¿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

Respuestas:

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