Question

我有一个带有行数的单元格的HTML表格。基本上只是左边的一个单元格，右边是rowspan = 2和2列。我希望右侧的列贴在顶部。但是，右侧的空间在两列之间平均分配。添加高度：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建议的那样，向右侧的第一列（Col_A）添加高度：1px可以解决Chrome和FF问题。但是在IE（和Edge）中它仍然没有按预期工作。

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

Answer 1

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

与html中的更改类似 -

＆＃13;

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

＆＃13;

表格单元格与行距对齐

1 个答案: