在 table 中向上移动文本

Question

我目前有一个 table 看起来像这样： http://s8.postimg.org/gybzti0rn/Screen_Shot_2015_02_27_at_1_30_23_PM.png

我想将船的描述移到图片的顶部。我尝试使用 valign="top"，但这将描述移到了 table 的最顶部，那里是船名。

这是我的 HTML:

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

在此先感谢您的帮助！

Answer 1

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

也许试试CSS

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

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

Answer 2

尝试添加填充

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

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

Fiddle

在 table 中向上移动文本

Moving text up in a table

html

html-table

valign