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表现完全不同？

以下是小提琴：

float: right

text-align: right

Answer 1

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

试图浮动一个表格单元格会干扰这个结构，因为它确实使它不再是一个表格单元格 - 它会把它变成一个阻止框，导致像colspan这样的HTML属性。你的标记不再适用：

注意。根据section 9.7中的规则，表格单元格的定位和浮动可能导致它们不再是表格单元格。使用浮动时，匿名表对象上的规则也可能导致创建匿名单元对象。

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

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

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

1 个答案: