html - 表格单元格与行跨度对齐

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>

fiddle :https://jsfiddle.net/jtr1r132/1/

更新:

正如 Pragnest 在下面建议的那样，将 height: 1px 添加到右侧的第一列 (Col_A) 可以解决 Chrome 和 FF 的问题。然而，在 IE(和 Edge)中，它仍然无法按预期工作。

更新 fiddle :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>