table 中行的垂直对齐和分布

Question

第二列跨越 2 行。我希望每一行的第一列不要除以 50%。 Row2 应该在 Row1 的内容下方开始。

<table border="1" style="width:850px">
    <tr>
        <td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
        <td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
    </tr>
    <tr style="vertical-align:top">
        <td style="vertical-align:top">2.Row Cell 1</td>
    </tr>
</table>

好的，这似乎与 Internet Explorer 11 有关，但必须有办法实现！？

Answer 1

添加 height: 1em; 似乎有效 - 第一个单元格如下所示：

<td style="width: 50%; vertical-align: top; height: 1em;">

Answer 2

下面的代码片段中有您的解决方案：

table , td, th {
 border: 1px solid #595959;
 border-collapse: collapse;
}
td, th {
 padding: 3px;
 width: 250px;
 height: 150px;
}
th {
 background: #f0e6cc;
}
.even {
 background: #fbf8f0;
}
.odd {
 background: #fefcf9;
}

<table>
 <tbody>
  <tr>
   <td style="height:1em">This is a test thank you for your attention</td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
 </tbody>
</table>

希望对您有所帮助。

table 中行的垂直对齐和分布

Vertical alignment and distribution of rows in table

html

css

vertical-alignment

internet-explorer-11