Comment empêcher que le texte dans une cellule de tableau à partir d'habillage

Question

Personne ne sait comment je peux éviter que le texte dans une cellule de tableau entre l'emballage? C'est pour l'en-tête d'un tableau, et le titre est beaucoup plus long que les données d'application, mais j'en ai besoin pour afficher sur une seule ligne. Il est correct si la colonne est très large.

Le HTML de mon (simplifié) de la table ressemble à ceci:

<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>

Le titre est lui-même enveloppé dans une div à l'intérieur de l' th balise pour des raisons relevant du javascript sur la page.

La table est à venir avec les titres d'emballage sur plusieurs lignes. Cela semble se produire uniquement lorsque la table est suffisamment large, que le navigateur est en essayant d'éviter le défilement horizontal. Dans mon cas, mais je veux le défilement horizontal.

Des idées?

Answer 1

Jetez un oeil à l' white-space de la propriété, utilisée comme ceci:

th {
    white-space: nowrap;
}

Cela va forcer le contenu de <th> pour les afficher sur une seule ligne.

À partir de la page liée, voici les différentes options pour l' white-space:

normal
Cette valeur indique les agents d'utilisateur à l'effondrement des séquences de l'espace blanc, et saut de lignes que nécessaire pour remplir la ligne cases.

pré
Cette valeur empêche les agents d'utilisateur à partir de l'effondrement des séquences de l'espace blanc. Les lignes ne sont brisés à la conservées des caractères de nouvelle ligne.

nowrap
Cette valeur s'effondre espace blanc comme pour "normal", mais supprime les sauts de ligne dans le texte.

pre-wrap
Cette valeur empêche les agents d'utilisateur à partir de l'effondrement des séquences de l'espace blanc. Les lignes sont brisés à la préservé caractères de saut de ligne, et, si nécessaire, à la ligne de remplissage des boîtes.

pré-ligne
Cette valeur indique les agents d'utilisateur à l'effondrement des séquences de l'espace blanc. Les lignes sont brisés à la préservé caractères de saut de ligne, et, si nécessaire, à la ligne de remplissage des boîtes.

Answer 2

<th nowrap="nowrap">

ou

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

ou

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

Answer 3

Il y a au moins deux façons de le faire:

L'utilisation de l'attribut nowrap à l'intérieur de la "td" tag:

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

L'utilisation non-sécable les espaces entre les mots:

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