HTML 表格使单元格高度适合内容 valign top

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

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

或者你可以添加 height: 100% 到它:

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