IE 10,11,Edge Table 单元格高度在内部变化 div with overflow-y: auto

Question

我正在尝试创建具有垂直和水平滚动的 html table，

为了实现这一点，我在 table 周围创建了一个 div，并在其上应用了 overflow:auto，这在 chrome 中效果很好，但创建的单元格具有不同的高度在 table.

里面

在 Google Chrome:

在 Internet Explorer 10/11/Edge 上：

这似乎是 Microsoft 已知的问题： bug report 至少三年了，但他们还没有设法修复

有人对此问题有任何解决方法吗？我需要支持 IE 10，所以请在您的回答中考虑这一点

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>

Answer 1

我通过在所有 td 元素上应用 height: 100% 解决了这个问题

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>

IE 10,11,Edge Table 单元格高度在内部变化 div with overflow-y: auto

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

html

css

internet-explorer

internet-explorer-10