tablas - como ajustar tabla en html

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

Question

¿Alguien sabe cómo puedo evitar que el texto en una celda de 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 HTML de mi tabla (simplificada) se ve así:

<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 encabezado en sí está envuelto en un div dentro de la etiqueta th por razones relacionadas con el javascript en la página.

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

¿Algunas ideas?

Answer 1

Echa un vistazo a la propiedad de white-space en white-space , utilizada de esta manera:

th {
    white-space: nowrap;
}

Esto forzará el contenido de <th> para mostrar en una línea.

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

normal
Este valor dirige a los agentes de usuario a colapsar secuencias de espacios en blanco y romper líneas según sea necesario para rellenar los cuadros de línea.

pre
Este valor evita que los agentes de usuario colapsen secuencias de espacios en blanco. Las líneas solo se rompen en caracteres de nueva línea conservados.

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

pre-envolver
Este valor evita que los agentes de usuario colapsen secuencias de espacios en blanco. Las líneas se dividen en caracteres de nueva línea conservados y, según sea necesario, para rellenar los cuadros de línea.

pre línea
Este valor dirige a los agentes de usuario a colapsar secuencias de espacios en blanco. Las líneas se dividen en caracteres de nueva línea conservados y, según sea necesario, para rellenar los cuadros de línea.

Answer 2

Hay al menos dos formas de hacerlo:

Use el atributo nowrap dentro de la etiqueta "td":

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

Usa espacios no rompibles entre tus palabras:

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

Answer 3

Llegué a esta pregunta para evitar que el texto se envolviera en el guión.

Así es como lo hice:

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

Referencia:

Cómo prevenir el salto de línea en guiones en todos los navegadores

Answer 4

<th nowrap="nowrap">

o

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

o

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