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


¿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 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 mesa está saliendo con el 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?

 232
Author: Christoffer Lette, 2008-11-19

4 answers

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

th {
    white-space: nowrap;
}

Esto forzará el contenido de <th> a mostrarse en una línea.

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

Normal
Este valor dirige a los agentes de usuario a contraer secuencias de espacios en blanco y romper líneas según sea necesario para llenar los recuadros de línea.

Pre
Este valor evita que los agentes de usuario contraigan secuencias de espacios en blanco. Las líneas solo se rompen con 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-wrap
Este valor evita que los agentes de usuario contraigan secuencias de espacios en blanco. Las líneas se rompen en caracteres de nueva línea conservados, y según sea necesario para llenar los cuadros de línea.

Pre-línea
Este valor dirige a los agentes de usuario a contraer secuencias de blanco espacio. Las líneas se rompen en caracteres de nueva línea conservados, y según sea necesario para llenar los cuadros de línea.

 401
Author: Owen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-31 10:18:00
<th nowrap="nowrap">

O

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

O

<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>
 56
Author: Grant Wagner,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-18 21:43:08

Hay al menos dos maneras de hacerlo:

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

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

Use espacios no rompibles entre sus palabras:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>
 18
Author: Sergey Golovchenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-18 03:39:15

Llegué a esta pregunta que necesitaba evitar el ajuste de texto en el guion.

Así es como lo hice:

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

Referencia:

Cómo evitar saltos de línea en guiones en todos los navegadores

 4
Author: gibberish,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:47:29