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

【问题标题】：HTML table fit cell height to contents valign topHTML 表格使单元格高度适合内容 valign top
【发布时间】：2016-12-09 23:39:20
【问题描述】：

我正在尝试创建一个表格，其中左列被推到顶部以适合其内容。注意右栏必须是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/

期望的结果：

【问题讨论】：

标签： html css html-table css-tables styling

【解决方案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>

【讨论】：

嗨，kukkuz，这适用于文本，但如果我在单元格中的内容是图像，则第一个和第二个单元格会相互重叠，因为图像太大。有没有办法根据其内容动态调整单元格内容的大小（使单元格高度适合内容）。
哦，那应该可以了：已添加rowspans...请检查
正在浏览我的旧答案并增强了答案:)

【解决方案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>

【讨论】：

在第三行试试这个。我得到你想要的输出