HTML 表格使单元格高度适合内容 valign top
Posted
技术标签:
【中文标题】HTML 表格使单元格高度适合内容 valign top【英文标题】：HTML table fit cell height to contents valign top 【发布时间】：2016-12-09 23:39:20 【问题描述】：我正在尝试创建一个表格，其中左列被推到顶部以适合其内容。注意右栏必须是height=300。
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" >
This is my 1st cell
</td>
<td valign="top" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" >This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" >
This is my 3rd cell
</td>
</tr>
</table>
这就是我到目前为止出来的：https://jsfiddle.net/5y33rtm3/1/
期望的结果：
【问题讨论】：
【参考方案1】：您可以在左侧第三行添加rowspan="5"：
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" >
This is my 1st cell
</td>
<td valign="top" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" >This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>或者你可以添加height: 100%到它：
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" >
This is my 1st cell
</td>
<td valign="top" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" >This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" 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> </td>
</tr>
<tr>
<td >
This is my 1st cell
</td>
<td valign="top" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" >This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" >
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>【讨论】：
在第三行试试这个。我得到你想要的输出以上是关于HTML 表格使单元格高度适合内容 valign top的主要内容，如果未能解决你的问题，请参考以下文章