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

时间:2021-11-18 22:22:43

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 Description up top, to the top of the table cell, rather than resting on the bottom.

那些只是中的两个。我试图将描述放在桌面顶部,而不是放在底部。

How can I do that?

我怎样才能做到这一点?

6 个解决方案

#1


77  

td.description {vertical-align: top;}

where description is the class name of the td with 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>

#2


5  

Try

尝试

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

Set the line-height value to the desired value.

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

#3


2  

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中的继承。只是提示先检查一下。

#4


1  

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;
 }

#5


1  

valign="top" should do the work.

valign =“top”应该做的工作。

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

#6


0  

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

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

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

#1


77  

td.description {vertical-align: top;}

where description is the class name of the td with 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>

#2


5  

Try

尝试

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

Set the line-height value to the desired value.

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

#3


2  

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中的继承。只是提示先检查一下。

#4


1  

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;
 }

#5


1  

valign="top" should do the work.

valign =“top”应该做的工作。

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

#6


0  

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

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

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