text-align sur un tableau dans une cellule (<table> à l'intérieur d'un <td>)

Question

Voici quelque chose que je n'aurais jamais pensé dire : J'ai un problème dans Firefox et Chrome, mais ça marche bien dans IE !

C'est très simple, mais je ne comprends pas pourquoi ça ne fonctionne pas :

J'ai un tableau à l'intérieur d'une cellule, et j'ai style="text-align:right" sur la cellule, mais le tableau reste à gauche dans Firefox et Chrome (dans IE il va docilement vers la droite...). Si je mets align=right dans la balise de la cellule alors ça marche, mais je ne veux pas faire ça.

Le code est essentiellement :

<table width="1000" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td style="text-align:right">

      <table border="1">
        <tr><td>Hello</td><td>Hello 2</td></tr>
      </table>

    </td>

    <td>Hello 2</td>
  </tr>
</table>

Je ne veux pas que le tableau imbriqué soit en largeur=100% ou quelque chose comme ça...

Quelqu'un pourrait-il m'expliquer pourquoi cela ne fonctionne pas, et comment le réparer, et peut-être pourquoi cela fonctionne dans IE mais pas dans Firefox ou Chrome ?

Answer 1

Je pense que Chrome et FF sont en fait ceux qui le rendent correctement. text-align n'est probablement pas censé affecter table éléments. Cependant, l'application float:right à la table fera ce que vous voulez.

Answer 2

J'aimerais ajouter que la méthode CSS pour aligner les tableaux par rapport à leur conteneur est la propriété margin.

Vous devez ajouter margin: 0 auto; si vous voulez l'aligner au centre, ou bien margin-left: auto; si vous souhaitez l'aligner sur la droite.

Comme le dit @maxedison, text-align ne fonctionnera qu'avec inline y inline-block L'autre solution consiste donc à modifier votre tableau interne pour qu'il prenne certaines de ces valeurs d'affichage.

Vous devez également vous rappeler que text-align fonctionne de "conteneur à contenu", ce qui signifie qu'elle est normalement appliquée à un conteneur pour en affecter le contenu (appliquée à une p pour affecter son contenu en ligne, tel que le texte qu'il contient), et margin: 0 auto fonctionne selon le principe "content-to-container", c'est-à-dire qu'il est normalement appliqué à un élément de bloc et affecte sa position par rapport à son conteneur (appliqué à un élément div pour le centrer sur son parent).

Answer 3

Si vous voulez le réparer (pas avec une fonctionnalité complète), vous pouvez écrire ceci :

table {
  display: inline-block;
}

Cela permet de centrer votre table avec les éléments suivants text-align: center; si elle est appliquée à l'élément ou aux éléments parents.

Answer 4

Si vous ne voulez pas que le div soit flottant, vous pouvez essayer ceci : http://jsfiddle.net/NvEZ8/

<div style="text-align:right;">
   <table  style="display:inline-block">
       <tbody>
       <tr>
           <td></td>
           <td>one</td>
           <td>two</td>
       </tr>
       </tbody>
    </table>
</div>

Il semble que text-align (avec un DOCTYPE html) n'affecte que l'élément inline-block dans Chrome et non l'élément inline seulement. En remplaçant inline-block par inline ici, cela ne fonctionne plus sur mon Chrome.