Cómo evitar que el texto de una celda de una tabla se ajuste
¿Alguien sabe cómo puedo evitar que el texto de una celda de una tabla se ajuste? Esto es para el encabezado de una tabla, y el encabezado es mucho más largo que los datos que aparecen debajo, 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 thetiqueta por motivos relacionados con el javascript de la página.
La tabla aparece con los títulos agrupados en varias líneas. Esto parece ocurrir sólo cuando la tabla es lo suficientemente ancha, ya que el navegador intenta evitar el desplazamiento horizontal. En mi caso, sin embargo, quiero desplazamiento horizontal.
¿Algunas ideas?
Eche un vistazo a la white-spacepropiedad, utilizada así:
th {
white-space: nowrap;
}
Esto obligará a que el contenido de <th>se muestre en una línea.
Desde la página vinculada, 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 a dividir líneas según sea necesario para llenar cuadros de líneas.pre
Este valor evita que los agentes de usuario colapsen secuencias de espacios en blanco. Las líneas sólo se dividen en los caracteres de nueva línea conservados.nowrap
Este valor colapsa los espacios 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 colapsen secuencias de espacios en blanco. Las líneas se dividen en los caracteres de nueva línea conservados y según sea necesario para llenar los cuadros de línea.pre-line
Este valor dirige a los agentes de usuario a contraer secuencias de espacios en blanco. Las líneas se dividen en los caracteres de nueva línea conservados y según sea necesario para llenar los cuadros de línea.
<th nowrap="nowrap">
o
<th style="white-space:nowrap;">
o
<th class="nowrap">
<style type="text/css">
.nowrap { white-space: nowrap; }
</style>
Hay al menos dos formas de hacerlo:
Utilice el atributo nowrap dentro de la etiqueta "td":
<th nowrap="nowrap">Really long column heading</th>
Utilice espacios irrompibles entre sus palabras:
<th>Really long column heading</th>
