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

71

这是我桌子的一部分（这是一种形式）：

那些只是两个<td>的<tr>。我正在尝试将Description放在表格单元格的顶部，而不是放在底部。

我怎样才能做到这一点？

html css

— 阿科
source

111

td.description {vertical-align: top;}

其中带有该文本的description的类名称在哪里td

td.description {
  vertical-align: top;
}

<td class="description">Description</td>

展开摘要

或内联（yuk！）

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

展开摘要

— clairesuzy
source

这对我不起作用:(也许因为Description td有一行文本而第二td有很多文本？

— knocte 2013年

糟糕，错误警报，我的问题是我在尝试对齐的TD上设置了错误的填充

— knocte 2013年

8

尝试

td.description {
  line-height: 15px
}

<td class="description">Description</td>

展开摘要

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

— DTS
source

我喜欢这种替代方法。它给你一个别样的控制相结合其它CSS样式等时可能是有用的

— 加文·杰克逊

3

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

— 理查德
source

3

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

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

展开摘要

— 莫加
source

3

valignHTML5中不推荐使用该属性。w3schools.com/tags/att_tr_valign.asp

— 凯文

1

我遇到了同样的问题，但是通过使用解决了!important。我忘记了的继承CSS。只是要先检查一下的提示。

— 拉齐
source

0

只需添加vertical-align：top就可以单独使用第一个td，而不需要所有td。

tr>td:first-child {
  vertical-align: top;
}

<tr>
  <td>Description</td>
  <td>more text</td>
</tr>

展开摘要

— 真野
source

0

CSS {vertical-align：top;}或html属性{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>

展开摘要

对于表垂直对齐，我们有2个选项。

是使用css {vertical-align：top;}

另一种方法是设置用户属性“ valign”，并且属性应为“ top” {valign =“ top”}

— 阿萨比尔
source

valign是过时的，因为HTML5且不应再被使用（参见developer.mozilla.org/en-US/docs/Web/HTML/Element/...）

— geisterfurz007