aligner à droite dans une cellule de tableau avec CSS

128

J'ai l'ancien code classique comme celui-ci

<td align="right">

qui fait ce qu'il dit: il aligne à droite le contenu de la cellule. Donc, si je mets 2 boutons dans cette cellule, ils apparaîtront au bon site de la cellule.

Mais ensuite, je refactorisais cela en CSS, mais il n'y a pas d'alignement correct? Je vois text-align, est-ce la même chose?

css

— Michel
source

154

Utilisation

text-align: right

La propriété CSS text-align décrit comment le contenu en ligne comme le texte est aligné dans son élément de bloc parent. text-align ne contrôle pas l'alignement des éléments de bloc lui-même, seulement leur contenu en ligne.

Voir

texte-align

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— rahul
source

5

est-ce qu'un <input type = "button"> est un élément de bloc parce que celui-ci n'est pas bien aligné?

— Michel

1

Ça dépend. J'ai un paragraphe, qui est un bloc, à l'intérieur d'une cellule de tableau (affichage css: table-cellule), et si je donne à ce paragraphe une largeur de 100%, il commence à respecter l'alignement du texte à droite. Je suppose que définir une largeur n'est pas toujours la meilleure chose à faire.

— Costa

3

Je suppose alors que la propriété text-alignn'est pas très bien nommée si elle s'applique aux boutons et aux commandes ainsi qu'au texte. Peut-être que cela aurait dû être appelé content-align?

— Ben

3

Michel: définit l'élément block sur inline-block, par exemple: td input {display: inline-block; }

— shalamos

1

ou moi ne fonctionne que float: right ou good old align = "right". wtf?

— Tone Škoda

7

Ce qui a fonctionné pour moi maintenant, c'est:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

Voir le violon suivant:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
source

6

N'oubliez pas le sélecteur 'nth-child' de CSS3. Si vous connaissez l'index de la colonne sur laquelle vous souhaitez aligner le texte à droite, vous pouvez simplement spécifier

table tr td:nth-child(2) {
    text-align: right;
}

Dans les cas avec de grandes tables, cela peut vous faire économiser beaucoup de balisage supplémentaire!

voici un violon pour toi .... https://jsfiddle.net/w16c2nad/

— Suite 404 introuvable
source

Génial: la solution la plus simple et la plus propre que j'ai vue.

— ncrypticus

2

Comment positionner des éléments de bloc dans une `td`cellule

Les réponses fournies font un excellent travail pour aligner le texte à droite dans une tdcellule.

Ce n'est peut-être pas la solution lorsque vous cherchez à aligner un élément de bloc comme indiqué dans la réponse acceptée. Pour y parvenir avec un élément bloc, j'ai trouvé utile d'utiliser les marges;

syntaxe générale

selector {
  margin: top right bottom left;
}

justifier juste

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

justifier le centre

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

aligner le centre

td {
  margin: auto;
}

Exemple de JS Fiddle

Sinon, vous pouvez faire tdafficher votre contenu inline-blocksi c'est une option, mais cela peut déformer la position de ses éléments enfants.

— John Mutuma
source