HTML / CSS-如何将单元格的一部分对齐到左边，而部分对齐？

Question

我想实现这个目标：

cell contents    :
cell contents 2  :
cell contents 32 :

因此“单元格内容”部分左对齐，“：”右对齐。我不想在每行中添加一个带有“：”的列。

我知道我可以添加一些：

 

...到标记，但想知道是否有更好的解决方案。

Answer 1

另一种选择是使用:after伪元素this works in IE8+ and all other browsers。

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

这是 jsFiddle

Answer 2

您有什么选择？你可以在单元格中放置更多标签并使用CSS吗？

如：

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