html - 为什么 float 和 text-align 在 td 中表现不同？

Question

以下是我的表结构:

<table border="1">
<tbody>
    <tr>
        <td class="new_doc" colspan="7">
            Add a New Document
        </td>
    </tr>
    <tr>
        <th>Sl</th>
        <th>Name</th>
        <th>Path</th>
        <th>Date</th>
        <th>Status</th>
        <th>User</th>
        <th>Share</th>
    </tr>   
    </tbody>
</table>

我希望类 new_doc 的 td 内容右对齐。

最初我尝试使用 float:right; 这给了我一个意想不到的结果。但是当我尝试使用 text-align: right; 时，它给了我想要的输出。

为什么它们对于 td 的行为完全不同？

以下是 fiddle :

float: right

text-align: right

Answer 1

表格和表格单元格具有独特的格式结构，在 CSS 中，is described in an entire section of its own .

尝试 float 表格单元格会干扰此结构，因为它确实会导致它不再是表格单元格——而是将其变成 block 框，从而导致 HTML 属性，例如 colspan 在您的标记中不再适用:

Note. Positioning and floating of table cells can cause them not to be table cells anymore, according to the rules in section 9.7. When floating is used, the rules on anonymous table objects may cause an anonymous cell object to be created as well.

根据 CSS table formatting model，遵循格式化表格的 CSS 规范的浏览器必须遵循关于如何处理此类情况的特定规则，以便保持相对健全的表格结构。 .具体来说，您在使用 float 时看到的是第一个 td，它现在是一个( float 的) block 框，自动包含在第一个 tr。请注意，此匿名单元格不会从您的标记继承colspan 属性；该属性完全停止应用。由于第一个 tr 中没有其他单元格，因此其余部分留空。一旦第一个 tr 被格式化，第二个 tr 就会正常构造。

当然，由于您希望对齐表格单元格的 text 内容，因此只有使用 text-align 属性才有意义。