html - HTML/CSS-如何将单元格的一部分向左对齐，一部分向右对齐？

Question

我想实现这一点：

cell contents    :
cell contents 2  :
cell contents 32 :

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

我知道我可以添加一些：

 

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

Answer 1

另一种选择是使用:after伪元素，这适用于 IE8+ 和所有其他浏览器。

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>