html - 垂直对齐两个相邻 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 上有一个vertical-align 属性，这是你想要的吗？

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

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