表不均匀的行高

Question

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

有人可以帮我吗？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;