Cómo evitar que el texto en una celda de la tabla se empaquete

Question

¿Alguien sabe cómo puedo evitar que el texto en una celda de la tabla se ajuste? Esto es para el encabezado de una tabla, y el encabezado es mucho más largo que los datos debajo de él, pero necesito que se muestre en una sola línea. Está bien si la columna es muy ancha.

El código HTML de mi mesa (simplificado) tiene el siguiente aspecto:

<table> 
    <thead> 
    <tr> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

El título en sí está envuelto en un div dentro de la etiqueta th por razones relacionadas con el código JavaScript en la página.

La tabla está saliendo con los encabezados que se envuelven en varias líneas. Esto parece suceder solo cuando la tabla es lo suficientemente amplia, ya que el navegador está tratando de evitar el desplazamiento horizontal. En mi caso, sin embargo, quiero desplazamiento horizontal.

¿Alguna idea?

Answer 1

Eche un vistazo a la propiedad white-space, usada así:

th { 
    white-space: nowrap; 
} 

Esto obligará a mostrar el contenido de <th> en una línea.

Desde la página enlazada, aquí están las diversas opciones para white-space:

normales
Este valor dirige usuario cerrar las secuencias de espacios en blanco, y romper las líneas como sea necesario para llenar cajas de línea.

pre
Este valor impide que los agentes de usuario cerrar las secuencias de espacios en blanco. Las líneas solo se rompen en caracteres preservados de nueva línea.

nowrap
Este valor se desploma espacio en blanco como para el 'normal', pero suprime los saltos de línea dentro del texto.

pre-wrap
Este valor impide que los agentes de usuario cerrar las secuencias de espacios en blanco. Las líneas se rompen en caracteres conservados de nueva línea y, según sea necesario, para rellenar recuadros de línea.

pre-línea de
Este valor dirige los agentes de usuario para colapsar secuencias de espacio en blanco. Las líneas se rompen en caracteres conservados de nueva línea y, según sea necesario, para rellenar recuadros de línea.

Answer 2

Hay al menos dos maneras de hacerlo:

Uso nowrap de atributos dentro de la etiqueta "td":

<th nowrap="nowrap">Really long column heading</th> 

Use espacios irrompibles entre sus palabras:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th> 

Answer 3

<th nowrap="nowrap"> 

o

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

o

<th class="nowrap"> 
<style type="text/css"> 
.nowrap { white-space: nowrap; } 
</style> 

Answer 4

Vine a esta pregunta necesidad de evitar el ajuste de texto en el guión.

Esto es cómo lo hice:

<td><nobr>Table Text</nobr></td> 

Referencia:

How to prevent line break at hyphens on all browsers