在单元格中的表格上进行文本对齐（<td> 中的 <table>）

Posted 2023-03-05

【中文标题】在单元格中的表格上进行文本对齐（<td> 中的 <table>）

【英文标题】：text-align on a table in a cell (<table> inside a <td>)

【发布时间】：2011-12-26 03:51:40

【问题描述】：

这是我从没想过会说的话：我在 Firefox 和 Chrome 中遇到问题，但在 IE 中运行良好！

很简单，但是我不明白为什么它不起作用：

我在一个单元格中有一个表格，并且我在单元格上有style="text-align:right"，但是该表格在 Firefox 和 Chrome 中保持在左侧（在 IE 中它乖乖地向右移动......）。如果我将 align=right 放在单元格标记中，那么它可以工作，但我不想这样做。

代码基本上是：

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

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

谁能向我解释为什么它不起作用，以及如何修复它，也许为什么它在 IE 中有效，但在 Firefox 或 Chrome 中无效？

【问题讨论】：

我认为在 FF 和 Chrome 中是正确的。表格不是文本，所以 text-align 不应该影响它。 align 应该适用于任何内容。

谢谢 - 那么我将如何使用 css 来对齐单元格中的表格？这是新的吗？几年后我又开始做网站了，以前我从来没有遇到过这个问题吗？

文本对齐影响内联和内联块元素，而不仅仅是文本。

添加到您的嵌套表格显示属性并将其设置为 inline-block

【参考方案1】：

我想补充一点，将表格相对于其容器对齐的 CSS 方法是使用 margin 属性。

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

正如@maxedison 所说，text-align 仅适用于 inline 和 inline-block 元素，因此另一种解决方案是更改您的内部表格以获取其中一些显示值。

您还需要记住 text-align 是从“容器到内容”工作的，这意味着它通常应用于容器以影响其内容（应用于 p 以影响其内联内容，例如text inside），而margin: 0 auto 从“内容到容器”工作，这意味着它通常应用于块元素并影响其与其容器相关的位置（应用于div 以使其居中于其父级）。

【参考方案2】：

我的猜测是 Chrome 和 FF 实际上是正确渲染它的。 text-align 可能不应该影响 table 元素。但是，将float:right 应用到表中会满足您的要求。

【讨论】：

非常感谢大家！正是我想要的。

【参考方案3】：

当你不希望 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>

看起来 text-align（带有 DOCTYPE html）只影响 Chrome 中的 inline-block 而不是 inline only 元素。在这里用 inline 替换 inline-block ，它在我的 Chrome 上不再工作了

【参考方案4】：

如果你想修复它（不是完整的功能），你可以这样写：

table 
  display: inline-block;

如果应用于父元素，这将使您的表格能够以text-align: center; 为中心。