ie11: why table height doesn't work as other browsers?

Question

I don't know how to asap my code to make it work as on others browsers. Basically, the td holds a div that serves as an image background to fit in the first td and has the same height as the tr.

With IE, I can't have the right layout.

Here is the code snippet (works fine on safari & chrome, mobile and desktop):

<table class="tableBlackOrange">
    <tbody>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Taupin</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>

The div is position: absolute within a td position:relative.

What we should get on IE as well:

The fiddle stands right there: http://jsfiddle.net/stephanedeluca/rp8k2o6n/