为什么float和text-align在TD中表现不同? [英] Why float and text-align behave different in a td?

问题描述

以下是我的表结构:

<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内容正确对齐.

I want the content of the td with class new_doc to be right aligned.

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

Initially I tried with float:right; which gave me an unexpected result. But when I tried with text-align: right; it gave me the desired output.

为什么它们在td上表现完全不同?

Why they are behaving entirely different for a td ?

以下是小提琴:

> <浮动>浮动:正确

文本对齐:右

推荐答案

表和表单元格具有唯一的格式设置结构，在CSS中，

Tables and table cells have a unique formatting structure which, in CSS, is described in an entire section of its own.

尝试浮动表格单元格会干扰此结构，因为从字面上看，它实际上不再使它成为表格单元格-而是将其变成一个块框，从而导致HTML属性，例如 colspan 就像您的标记中一样不再适用:

Attempting to float a table cell will interfere with this structure, as it quite literally causes it to no longer be a table cell — it turns it into a block box instead, causing HTML attributes such as colspan as in your markup to no longer apply:

注意.根据

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格式表规范的浏览器必须遵循有关如何处理此类情况的特定规则，以便根据

Browsers following the CSS spec on formatting tables have to follow specific rules on how to handle such cases in order to preserve a relatively sane table structure according to the CSS table formatting model. Specifically, what you see when using float is that the first td, which is now a (floating) block box, is automatically contained in an anonymous table cell within the first tr. Note that this anonymous cell does not inherit the colspan attribute from your markup; the attribute simply stops applying altogether. Since there are no other cells in the first tr, the rest of it is left blank. Once the first tr has been formatted, the second tr is then constructed as normal.

当然，由于您要对齐表格单元格的 text 内容，因此仅使用 text-align 属性有意义.

Of course, since you're looking to align the text content of your table cell, it only makes sense to use the text-align property to do so.

这篇关于为什么float和text-align在TD中表现不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！