垂直对齐两个相邻tds的文本

Question

我有一张表，每行有两个tds。我注意到，如果我想对文本进行换行，则相反td内的文本不会垂直对齐它。带有换行符的td会到达单元格的顶部，而另一个则与中心垂直对齐。什么是最有效的解决方案，保持中心和基线平等对齐？

http://jsfiddle.net/653K2/2/

HTML

<table>
 <tbody>
  <tr>
   <td>Category One</td>
   <td>Data</td>
  </tr>
  <tr>
   <td>Category Two</td>
   <td>Data<br>More Data</td>
  </tr>
 </tbody>
</table>

CSS

table {
    width: 100%;
}
table tr td:first-child {
    color: #777;
    width: 40%;
}
tr {
    height: 40px;
    border-bottom: 1px dotted #e6e6e6;
}

Answer 1

也许您想要的是添加到您的CSS

td {vertical-align: baseline}

用[基线，顶部，中心，底部]之一替换基线

Answer 2

css上有一个vertical-align属性，这是你想要的吗？

td { text-align:left; vertical-align:top; padding:0}

http://jsfiddle.net/653K2/3/

Answer 3

td {padding: 10px 0; vertical-align: top;}

http://jsfiddle.net/653K2/4/