行高不均匀的表格答案

【问题标题】：Table with uneven row heights行高不均匀的表格
【发布时间】：2017-09-15 18:30:35
【问题描述】：

我在 HTML 表格中遇到了这个问题。左列应该有 3 行（我只是在你下面看到的图像中玩耍），右边只有 1 行。我想将文本放在左列第一行的左上角。我可以放置文字，但它不在左上角。

这是我的代码：

<table border="1">
  <tbody>
    <tr>
      <td style="width: 50%;">a</td>
      <td style="width: 50%;" rowspan="7"><img src="http://chorix.be/wp-content/uploads/2017/02/Achtergrond.gif" alt="" width="570" height="570" class="alignnone size-full wp-image-378" /></td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html html-table rows

【解决方案1】：

我相信您正在寻找的是vertical-align。默认情况下，表格单元格设置为middle，但您可以将其设置为top：

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

<table border="1">
  <tbody>
    <tr>
      <td style="width: 50%; vertical-align: top;">a</td>
      <td style="width: 50%;" rowspan="7"><img src="http://chorix.be/wp-content/uploads/2017/02/Achtergrond.gif" alt="" width="570" height="570" class="alignnone size-full wp-image-378" /></td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
    <tr>
      <td style="width: 50%;">a</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>

【讨论】：

没问题。如果您发现它足以解决您的问题，请务必将答案标记为“已接受”！