单元格中的表格上的文本对齐(<td>中的<table>)

Question

这是我从未想过的事情:我在Firefox和Chrome中遇到了问题,但它在IE中运行良好!

这很简单,但我不明白为什么它不起作用:

我在一个单元格里面有一张桌子,而且我style="text-align:right"在单元格上,但桌子留在Firefox和Chrome中(在IE中,它乖乖地向右移动......).如果我在单元格标签中放置align = right然后它可以工作,但我不想这样做.

代码基本上是:

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

我不希望嵌套表是宽度= 100%或类似的东西......

任何人都可以向我解释为什么它不起作用,以及如何解决它,也许为什么它在IE中工作,但不是Firefox或Chrome？

Answer 1

我的猜测是Chrome和FF实际上是正确渲染它的.text-align可能不应该影响table元素.但是,应用float:right到表将执行您想要的操作.

Answer 2

我想补充说,CSS方法相对于其容器对齐表是使用margin属性.

margin: 0 auto;如果您想将其与中心对齐,或者margin-left: auto;您想将其与右侧对齐,则必须添加.

正如@maxedison所说,text-align只能使用inline和inline-block元素,所以另一个解决方案就是改变你的内部表来获取一些显示值.

您还需要记住,text-align从"容器到内容"的工作方式,这意味着它通常应用于容器以影响其内容(应用于p影响其内联内容,如内部文本),并margin: 0 auto从'内容开始工作-to-container',意味着它通常应用于块元素并影响其与容器相关的位置(应用于将div其置于其父容器中).