表格单元格与行跨度对齐

Question

我有一个 HTML 表格，其中包含一个具有行跨度的单元格。基本上只是左边的一个单元格，右边有 rowspan=2 和 2 列。我希望右侧的列粘在顶部。但是，右侧的空间在两列之间平均分配。将 height: 100% 添加到右侧的最后一列在 Chrome 中可以解决问题，但在 FF 或 IE 中不起作用。

<table border="1" style="width: 200px;">
<tr>
    <th>Col1</th>
    <th>Col2</th>
  </tr>
  <tr>
    <td rowspan="2">Some long cell here...The point is that the Col_A and Col_B should both stick to the top. I tried adding height: 100% to the last column (Col_B) but that does only work in Chrome. Firefox puts Col_B at the very bottom while IE seems to completely ignore it.</td>
    <td>Col_A</td>
  </tr>
  <tr>
    <td>Col_B</td>
  </tr>
</table>

小提琴：https://jsfiddle.net/jtr1r132/1/

更新：

正如 Pragnest 在下面建议的那样，将 height:1px 添加到右侧的第一列 (Col_A) 对 Chrome 和 FF 有效。但在 IE（和 Edge）中，它仍然无法按预期工作。

更新小提琴：https://jsfiddle.net/jtr1r132/9

Answer 1

在你的情况下，你需要一些替代来实现你的输出。 如下所示，您需要删除第二列中的高度并在第一列中设置 1 px 高度，以便自动实现您的输出。

喜欢下面的 html 更改 –

    <table border="1" style="width: 200px;">
      <tr>
        <th>Col1</th>
        <th>Col2</th>
      </tr>
      <tr>
        <td rowspan="2">Some long cell here...The point is that the Col_A and Col_B should both stick to the top. I tried adding height: 100% to the last column (Col_B) but that does only work in Chrome. Firefox puts Col_B at the very bottom while IE seems to completely ignore it.</td>
        <td style="height: 1px">Col_A</td>
      </tr>
      <tr>
        <td >Col_B</td>
      </tr>
    </table>