边缘表格中的溢出滚动条无法正确显示答案

【问题标题】：Overflow scrollbars in tables in edge dont display correctly边缘表格中的溢出滚动条无法正确显示
【发布时间】：2020-01-14 17:51:18
【问题描述】：

我在任何地方都找不到这个，所以我们开始吧。最大宽度和溢出设置为自动获取滚动条的表格，就像人们期望的那样。这在 Chrome 中效果很好，但 Edge（和 IE）似乎对这些滚动条有问题

这些图片可能有助于理解我面临的问题：

Chrome：（我想要它）

chrome

边缘：（坏）

edge

（还不能发图，需要10声望）

<html>
<style>
    table {
        border-collapse: collapse;
    }
    td {
        overflow: auto;
        max-width: 100px;
        border: 1px solid black;
        padding: 10px;
    }
</style>
<body>
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>tset</td>
            <td>tset test test testsetsetstsetsetsetststsetststsetst</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</body>
</html>

<html>
<style>
    table {
        border-collapse: collapse;
    }
    td {
        overflow: auto;
        max-width: 100px;
        border: 1px solid black;
        padding: 10px;
    }
</style>
<body>
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>tset</td>
            <td>tset test test testsetsetstsetsetsetststsetststsetst</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</body>
</html>

【问题讨论】：

标签： html css google-chrome internet-explorer microsoft-edge

【解决方案1】：

尝试使用：

    border-collapse: separate;
    border-spacing: 0px;

<html>
<style>
    table {
        border-collapse: separate;
        border-spacing: 0px;
    }
    td {
        overflow: auto;
        max-width: 100px;
        border: 1px solid black;
        padding: 10px;
    }
</style>
<body>
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>tset</td>
            <td>tset test test testsetsetstsetsetsetststsetststsetst</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</body>
</html>

【讨论】：