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

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包装器

我尝试了以下方法:

1. 设置valign="top"在(单独)table,th和tr水平-它没有任何效果
2. 设置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 部分或单独的文件中，但您甚至可以将其放在“< table”标记之前。

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

Answer 3

valign如果我们在这里看到的所有设置都是实际使用的设置，那么无论如何都应该有效。

全局 CSS 设置

但我怀疑这里有另一个枪手。你检查过你的全局 CSS 文件它为TH元素定义了什么吗？也许这就是让你头疼的原因。