Search code examples
htmlcssinternet-explorerinternet-explorer-10

IE 10,11,Edge Table Cell height varies inside div with overflow-y: auto

I'm trying to create an html table with vertical and horizontal scroll,

in order to achieve this i created a div surrounding the table with overflow:auto applied on it, this works well in chrome but creates cells with different heights inside the table.

  • On Google Chrome:

enter image description here

  • On Internet Explorer 10/11/Edge:

enter image description here

this seems to be an issue known to Microsoft: bug report for at least three years but they haven't managed to fix yet

does anyone have any workaround to this issue? i need to support IE 10 so please consider that in your answer

code on plunker 

 <html >
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="container" >
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>
                                123456
                                </td>
                                <td>
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    45454 4545 4546 4546 654654 654654 654654 6546
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
Solution

  • i solved the issue by applying a height: 100% on all td elements

    solution

        <html >
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="container" >
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>
                                123456
                                </td>
                                <td>
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    45454 4545 4546 4546 654654 654654 654654 6546
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>