Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
这是我从未想过的事情：我在Firefox和Chrome中遇到了问题，但它在IE中运行良好！
It's very simple, but I don't understand why it doesn't work:
这很简单，但我不明白为什么它不起作用：
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
我在一个单元格中有一个表格，我在单元格上有一个style =“text-align：right”，但是这个表保留在Firefox和Chrome中（在IE中它乖乖地向右移动......）。如果我在单元格标签中放置align = right，那么它可以工作，但我不想这样做。
Code is basically:
代码基本上是：
<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>
I don't want the nested table to be width=100% or anything like that...
我不希望嵌套表是宽度= 100％或类似的东西......
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
任何人都可以向我解释为什么它不起作用，以及如何解决它，也许为什么它可以在IE浏览器而不是Firefox或Chrome？
4 个解决方案
#1
9
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
我的猜测是Chrome和FF实际上是正确渲染它的。 text-align可能不应该影响表元素。但是，将float：right应用于表格将完成您想要的操作。
#2
6
I would like to add that the CSS way to align tables relative to its container is with the margin property.
我想补充一点，CSS相对于其容器对齐表的方法是使用margin属性。
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
您必须添加保证金：0 auto;如果你想将它与中心对齐，或者在margin-left：auto;如果你想将它对齐到右边。
As @maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
正如@maxedison所说，text-align仅适用于内联和内联块元素，因此另一个解决方案是更改内部表以获取其中一些显示值。
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
您还需要记住text-align从“容器到内容”工作，这意味着它通常应用于容器以影响其内容（应用于ap以影响其内联内容，如文本内）和边距：0 auto从'content-to-container'开始工作，这意味着它通常应用于块元素并影响其与容器相关的位置（应用于div以将其居中于其父容器）。
#3
1
If you want to fix it (not with full functionality), you can write this:
如果你想修复它（没有完整的功能），你可以这样写：
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
这使得您的表能够以text-align：center;为中心，如果应用于父元素。
#4
0
when you don't want the div to be floating, you may try this : http://jsfiddle.net/NvEZ8/
当你不想让div浮动时，你可以试试这个：http：//jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
看起来text-align（带有DOCTYPE html）只影响Chrome中的inline-block而不影响仅内联元素。在此处通过内联替换内联块，它在我的Chrome上不再起作用
#1
9
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
我的猜测是Chrome和FF实际上是正确渲染它的。 text-align可能不应该影响表元素。但是，将float：right应用于表格将完成您想要的操作。
#2
6
I would like to add that the CSS way to align tables relative to its container is with the margin property.
我想补充一点，CSS相对于其容器对齐表的方法是使用margin属性。
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
您必须添加保证金：0 auto;如果你想将它与中心对齐，或者在margin-left：auto;如果你想将它对齐到右边。
As @maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
正如@maxedison所说，text-align仅适用于内联和内联块元素，因此另一个解决方案是更改内部表以获取其中一些显示值。
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
您还需要记住text-align从“容器到内容”工作，这意味着它通常应用于容器以影响其内容（应用于ap以影响其内联内容，如文本内）和边距：0 auto从'content-to-container'开始工作，这意味着它通常应用于块元素并影响其与容器相关的位置（应用于div以将其居中于其父容器）。
#3
1
If you want to fix it (not with full functionality), you can write this:
如果你想修复它（没有完整的功能），你可以这样写：
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
这使得您的表能够以text-align：center;为中心，如果应用于父元素。
#4
0
when you don't want the div to be floating, you may try this : http://jsfiddle.net/NvEZ8/
当你不想让div浮动时，你可以试试这个：http：//jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
看起来text-align（带有DOCTYPE html）只影响Chrome中的inline-block而不影响仅内联元素。在此处通过内联替换内联块，它在我的Chrome上不再起作用