html - 在没有边框的表格上使用变换比例会在 元素之间创建空间

Question

所以我在悬停在我的 table 上时使用变换比例。这是在我悬停(并缩放表格)之前

这是悬停之后(以及缩放之后)

您看到它以某种方式在 <td> 之间创建了空间元素，以及其他任何东西。我尝试了很多东西，比如 border-collapse但我无法删除它。

这是 HTML:

<div class="kartica">
    <table class="custom-table table table-hover table-responsive">
        <tbody>
            <tr>
                <td class="text-center">
                    something
                </td>

                <td class="text-center ">
                    something
                </td>

                <td class="text-center">
                    something
                </td>
             </tr>
         </tbody>
    </table>
</div>

这是 CSS:

.custom-table {
    margin-bottom: 0px;
    border: none;
}

.custom-table td{
    border: none;
}

.custom-table tbody tr:hover {
    background-color: #edf0f3;
}

.kartica:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: all 70ms ease-in-out;
    -moz-transition: all 70ms ease-in-out;
    -o-transition: all 70ms ease-in-out;
    transition: all 70ms ease-in-out;
}

有办法去除吗？

编辑:这里是 codepen .将鼠标悬停在表格上时，您应该会看到细白线。

Answer 1

我看到这个问题仍然没有答案，但我设法弄明白了。出现这些线条是因为您通过“裂缝”看到了 table 的颜色。通过匹配表格的背景颜色属性，这些线条就会消失。