HTML/CSS - comment aligner une partie d'une cellule vers la gauche et une partie vers la droite?

Question

Je veux y parvenir:

cell contents : 
cell contents 2 : 
cell contents 32 : 

Ainsi est aligné à gauche la partie « contenu de la cellule », et « : » est aligné à droite. Je ne veux pas ajouter une colonne avec ":" dans chaque ligne.

Je sais que je peux ajouter un certain nombre de:

  

... au balisage, mais il y avait demandé si une meilleure solution.

Answer 1

Quelles sont vos options ici? Pouvez-vous mettre plus de tags dans la cellule et utiliser CSS?

Tels que:

<tr> 
    <td> 
     <p class="left">Cell Contents</p> 
     <p class="right">:</p> 
     <div class="clear"></div> 
    </td> 
</tr> 

<style type="text/css"> 
    p.left { 
     float:left; 
    } 

    p.right { 
     float:right; 
    } 

    div.clear { 
     clear:both; 
    } 
</style> 

Answer 2

Une autre option est d'utiliser l'élément :after pseudo, this works in IE8+ and all other browsers.

td:after 
{  
    content: ':'; 
    float: right; 
} 

Voici un jsFiddle