表格单元格中文本的垂直对齐方式

AKo*_*Kor 67 html css

这是我桌子的一部分(这是一个表格):

那些只是两个<td>人的<tr>.我试图将描述置于表格单元的顶部,而不是放在底部.

我怎样才能做到这一点?

cla*_*uzy 97

td.description {vertical-align: top;}
Run Code Online (Sandbox Code Playgroud)

其中包含该文本description的类名称在哪里td

td.description {
  vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)
<td class="description">Description</td>
Run Code Online (Sandbox Code Playgroud)

或内联(yuk!)

<td style="vertical-align: top;">Description</td>
Run Code Online (Sandbox Code Playgroud)


mor*_*gar 8

valign="top"应该做这项工作。

<tr>
  <td valign="top">Description</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

  • HTML5 中已弃用“valign”属性。http://www.w3schools.com/tags/att_tr_valign.asp (8认同)

小智 8

尝试

td.description {
  line-height: 15px
}
Run Code Online (Sandbox Code Playgroud)
<td class="description">Description</td>
Run Code Online (Sandbox Code Playgroud)

将行高值设置为所需的值.


小智 7

如果您使用 Bootstrap,请为您的表格添加以下自定义样式设置:

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
      vertical-align: middle;
 }
Run Code Online (Sandbox Code Playgroud)