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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5943166/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:30:51  来源:igfitidea点击:

Vertical Alignment of text in a table cell

htmlcss

提问by AKor

Here's a portion of my table (it's a form):

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

Those are just two <td>'s in a <tr>. I'm trying to get Descriptionup top, to the top of the table cell, rather than resting on the bottom.

这些只是两个<td>的一个<tr>。我试图将描述放在表格单元格的顶部,而不是放在底部。

How can I do that?

我怎样才能做到这一点?

回答by clairesuzy

td.description {vertical-align: top;}

where descriptionis the class name of the tdwith that text in it

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

td.description {
  vertical-align: top;
}
<td class="description">Description</td>

OR inline (yuk!)

或内联(yuk!)

<td style="vertical-align: top;">Description</td>

回答by DTS

Try

尝试

td.description {
  line-height: 15px
}
<td class="description">Description</td>

Set the line-height value to the desired value.

将 line-height 值设置为所需的值。

回答by Richard

If you are using Bootstrap, please add the following customised style setting for your table:

如果您使用的是 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;
 }

回答by morgar

valign="top"should do the work.

valign="top"应该做的工作。

<tr>
  <td valign="top">Description</td>
</tr>

回答by Razzi

I had the same issue but solved it by using !important. I forgot about the inheritance in CSS. Just a tip to check first.

我有同样的问题,但通过使用!important. 我忘记了CSS. 只是一个提示,首先检查。

回答by Mano

Just add vertical-align:top for first td alone needed not for all td.

只需为第一个 td 添加 vertical-align:top 不需要所有 td。

tr>td:first-child {
  vertical-align: top;
}
<tr>
  <td>Description</td>
  <td>more text</td>
</tr>