Question

我使用AJAX动态生成表。要填充的表的结构如下：

<table id="foobar"  style="width:100%">
    <thead>
        <tr>
            <th style="width:20%;"></th>
            <th style="width:55%;"></th>
            <th title="widget name">Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

单元格数据包含：

图片
带有锚标记和段落的div包装器

我尝试了以下内容：

在valign="top"，table和th级别设置tr（单独） - 它没有效果
在style="vertical-align: top;"，table和th级别设置tr（单独） - 它没有效果

我不想在单元格级别设置align属性，因为如果表包含多个（比如数百个）行，它会导致太多不必要的膨胀。

如何强制表格将其单元格内容垂直对齐到顶部（请记住单元格包含块元素？

Answer 1

以下是TH和TD标记的基本表示例，其中内容设置为“vertical-align：top”。

演示：http://jsfiddle.net/HAQ3s/472/

th, td {
    vertical-align: top;
}

<table>
    <tr>
        <th>A<br /><br /></th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1<br /><br /></td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Answer 2

要以您希望的方式影响细胞，您需要在细胞水平上设置对齐。由于您不希望为每个人执行此操作，因此您需要考虑在页面中添加css / style部分。以下是您需要的示例定义 - 通常位于head部分或单独的文件中，但您甚至可以在“＆lt; table”标记之前使用它。

<style type="text/css">
td {
  vertical-align: top;
}
</style>

Answer 3

如果我们在此处看到的所有设置都是实际使用的设置，

valign应该可以正常工作。

全局CSS设置

但我怀疑这里有一个不同的枪手。您是否检查了全局CSS文件为TH元素定义的内容？也许这就是令你头疼的事情。

Answer 4

tr {vertical-align: top;}

使用您的示例代码为我工作，也许您需要查看重置或某些内容是否明确将垂直对齐设置为td上的中间或底部

在这种情况下类似

tr td {vertical-align: top;}

也可以使选择器更具体，但在实际使用情况下，可能需要更多选项，具体取决于导致td否决tr设置的原因

Answer 5

在我的情况下，我给了!important，所以它不起作用。移除后，垂直对齐效果会很好。

th, td {
    vertical-align: top; //Don't use !important keyword.
}

希望它对某人有帮助。

垂直对齐和valign不在桌子上工作！

5 个答案:

全局CSS设置