在表格中向上移动文本答案

【问题标题】：Moving text up in a table在表格中向上移动文本
【发布时间】：2015-02-28 03:14:26
【问题描述】：

我目前有一张如下所示的表格： http://s8.postimg.org/gybzti0rn/Screen_Shot_2015_02_27_at_1_30_23_PM.png

我想将船的描述移到图片的顶部。我尝试使用 valign="top"，但这将描述移至表的最顶部，即船名所在的位置。

这是我的 HTML：

<table border ="1">
<tr>
    <th> Boat Name </th>
  <th rowspan="2">Description</th>
  </tr>
  <tr>
    <td><img src="boatimage.png"></td>
  </tr>      
</table>

提前感谢您的帮助！

【问题讨论】：

标签： html html-table valign

【解决方案1】：

尝试添加填充

<table border ="1">
<tr>
    <th> Boat Name </th>
  <th rowspan="2" style="vertical-align:top;padding-top:25px">Description</th>
  </tr>
  <tr>
    <td><img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"></td>
  </tr>      
</table>

由于您添加的行跨度，它将覆盖该描述 <th> 标题上的 2 行并相应地放置文本 description 在这种情况下，您必须通过添加填充来手动调整它以将其与图像 <td> 行边框对齐.

Fiddle

【讨论】：

【解决方案2】：

你能把问题说清楚一点吗？

也许试试 CSS

<th style="display:block;position:relative;top:20px;" rowspan="2">

这会将它从单元格顶部移动 20 像素

【讨论】：

我想知道如何编辑我的代码以使描述与图像顶部对齐
@Demi 在这种情况下见上文 - 只需将 20px 更改为适合的任何内容