HTML表格适合单元格高度到内容valign顶部

Question

我正在尝试创建一个表格，其中左列被推到顶部以适合其内容。请注意，右栏需要height=300。

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td valign="top" width="65%">
    This is my 1st cell
  </td>
  <td valign="top"  width="35%" height="300" rowspan="3" align="right">
    This is long cell
  </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is my 3rd cell
    </td>
  </tr>
</table>

这是我到目前为止所得到的：https://jsfiddle.net/5y33rtm3/1/

期望的结果：

Answer 1

您可以为左侧第三行添加rowspan="5"：

＆＃13;

＆＃13;

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is my 1st cell
    </td>
    <td valign="top" width="35%" height="300" rowspan="7" align="right">
      This is long cell
    </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
      This is my 3rd cell
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

或者您可以向其添加height: 100%：

＆＃13;

＆＃13;

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" width="65%">
      This is my 1st cell
    </td>
    <td valign="top" width="35%" height="300" rowspan="7" align="right">
      This is long cell
    </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE --> 
      This is my 3rd cell
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
  <td  width="65%">
    This is my 1st cell
  </td>
  <td valign="top"  width="35%" height="300" rowspan="3" align="right">
    This is long cell
  </td>
  </tr>
  <tr>
    <td valign="top" width="65%">This is my 2nd cell</td>
  </tr>
  <tr>
    <td valign="top" style="height:100%" width="65%">
      <img src="ant.jpg" style="height:40%;width:40%;" />
    </td>
  </tr>
</table>