Table cell alignment with rowspan

Question

I have a HTML table with a cell that has a rowspan. Basically just a cell on the left with rowspan=2 and 2 columns on the right. I want the columns on the right side to stick to the top. However, the space on the right side is divided equally between the two columns. Adding height: 100% to the last column on the right side does the trick in Chrome, but does not work in FF or 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/

Update:

As Pragnest suggested below, adding height: 1px to the first column on the right (Col_A) does the trick for Chrome and FF. In IE (and Edge) however it still does not work as intended.

Updated fiddle: https://jsfiddle.net/jtr1r132/9

Answer 1

In your case you need to some alternate to achieve your output. Like as below you need to remove height in second column and set 1 px height in first column so automatically achieve your output.

Like change in html as per below –

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