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

下面是我表格的一部分(它是一个表单) :

那只是 <tr>里的两个 <td>。我试着把 描述放在表格的顶部,而不是放在底部。

我该怎么做?

231394 次浏览
td.description {vertical-align: top;}

where description is the class name of the td with that text in it

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

OR inline (yuk!)

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

valign="top" should do the work.

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

Try

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

Set the line-height value to the desired value.

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

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

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

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

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

CSS {vertical-align: top;} or html Attribute {valign="top"}

.table td,
.table th {
border: 1px solid #161b21;
text-align: left;
padding: 8px;
width: 250px;
height: 100px;
    

/* style for table */
}


.table-body-text {
vertical-align: top;
}
<table class="table">
<tr>
<th valign="top">Title 1</th>
<th valign="top">Title 2</th>
</tr>
<tr>
<td class="table-body-text">text</td>
<td class="table-body-text">text</td>
</tr>
</table>

For table vertical-align we have 2 options.

  1. is to use css {vertical-align: top;}
  1. another way is to user attribute "valign" and the property should be "top" {valign="top"}