IE/Edge not applying transform: translate to table

Question

When adding a CSS transformation like transform:translate(0px, -45px) to a table row, Internet Explorer (tested 10 and 11) and Microsoft Edge do not correctly display the transformation.

Using some simple code as an example:

<table style="width:500px;">
    <tbody>
        <tr style="height: 30px; background-color:red; color:white;">
            <td>1</td>
        </tr>
        <tr style="height: 30px; background-color:blue; color:white;">
            <td>2</td>
        </tr>
        <tr style="height: 30px; background-color:yellow; color:black; transform:translate(0, -45px);">
            <td>3</td>
        </tr>
    </tbody>
</table>

This screenshot shows the problem: row 3 should be positioned on top of rows 1 and 2, but in IE/Edge, it hasn't moved. Almost any other modern browser behaves as expected. Microsoft notes that IE 10+ and Edge should support (unprefixed) transform, and based on the standard, elements with display table-row are supported.

Does anyone have any clue why this doesn't work?

Answer 1

As defined in the spec, transformable-elements includes elements whose display property computes to table-row. As such, you are correct to expect transform to relocate table rows on the screen. Microsoft Edge appears to lack this support.

Edge does, however, translate table cells. This may provide temporary relief for the time being. I am going to work up a few tests to ensure that we are accurately implementing this functionality.

Answer 2

Yeah, I am facing the same issue. You can make the tr display:block but... this will destroy your table. Let's hope microsoft will deal with this fast.