Question

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

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

Chrome浏览器：（我想要它）

边缘：（不良）

（尚无法发布图片，需要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>

Answer 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>

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

1 个答案: