Html 垂直对齐和 valign 不能在桌子上工作！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5647231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vertical align and valign not working on table!
提问by oompahloompah
I am dynamically generating a table using AJAX. The structure of the table to be populated is as follows:
我正在使用 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>
The cell data contains either:
单元格数据包含：
- an image
- a div wrapper with anchor tags and paragraphs
- 一个图像
- 带有锚标记和段落的 div 包装器
I tried the following:
我尝试了以下方法：
- setting
valign="top"(separately) at thetable,thandtrlevels - it had no effect - setting
style="vertical-align: top;"(separately) at thetable,thandtrlevels - it had no effect
valign="top"在table,th和tr级别设置（单独）- 它没有效果style="vertical-align: top;"在table,th和tr级别设置（单独）- 它没有效果
I don't want to set the align property at the cell level because it will cause too much unnecessary bloat if the table contains several (say hundreds of) rows.
我不想在单元格级别设置 align 属性，因为如果表包含几行（比如数百行），它会导致过多不必要的膨胀。
How can I force a table to vertically align its cell contents to top (bearing in mind that the cells contain block elements?
如何强制表格将其单元格内容垂直对齐到顶部（记住单元格包含块元素？
采纳答案by Robert Koritnik
valignshould work no matter what if all settings that we see here are those that are actually used.
valign无论我们在这里看到的所有设置都是实际使用的设置，都应该可以工作。
Global CSS settings
全局 CSS 设置
But I suspect a different gunmanhere. Did you check your global CSS file what it defines for THelements? Maybe that's what's giving you headaches.
但我怀疑这里有不同的枪手。你检查过你的全局 CSS 文件它为TH元素定义了什么吗？也许这就是让你头疼的原因。
回答by wdm
Here is a basic table example with TH and TD tags where the content is set to "vertical-align:top".
这是一个带有 TH 和 TD 标签的基本表格示例，其中内容设置为“vertical-align:top”。
Demo: http://jsfiddle.net/HAQ3s/472/
演示：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>
回答by Roddy
To affect cells in the way you want, you do need to set the alignment at the cell level. Since you don't want to do this for each individual one, you need to think about adding a css/style section to your page. Here's a sample definition for what you need - this is normally in the head section or a separate file, but you could even have this just before the "< table" tag.
要以您想要的方式影响单元格，您确实需要在单元格级别设置对齐方式。由于您不想为每个人都这样做，因此您需要考虑在页面中添加一个 css/style 部分。这是您需要的示例定义 - 这通常位于 head 部分或单独的文件中，但您甚至可以在“< table”标记之前使用它。
<style type="text/css">
td {
vertical-align: top;
}
</style>
回答by clairesuzy
tr {vertical-align: top;}
works for me with your example code, perhaps you need to see if a reset or something is explicitly setting the vertical alignment to middle or bottom on the tds
使用您的示例代码对我有用，也许您需要查看重置或其他内容是否明确将垂直对齐设置为tds 的中间或底部
in that case something like
在那种情况下，像
tr td {vertical-align: top;}
should also work to make the selector more specific, though in your actual use case it might need more depending on what is causing the tdto overrule the trsetting
还应该使选择器更具体，但在您的实际用例中，它可能需要更多，具体取决于导致td否决tr设置的原因
