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

时间:2016-08-04 01:59:56

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

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

enter image description here

期望的结果:

enter image description here

2 个答案:

答案 0 :(得分:0)

您可以为左侧第三行添加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;

答案 1 :(得分:0)

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