Using transform scale on table without borders creates space between <td> elements

Question

So I'm using transform scale on hover on my table. This is before I hover (and scale the table)

This is after the hover (and after it scales)

You see it somehow creates space between <td> elements, and whatever else. I've tried a lot of things, like border-collapse but I just can't remove it.

This is the 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>

This is the 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;
}

Is there a way to remove it?

Edit: Here is the codepen. You should see the thin white lines when you hover over the table.

Answer 1

I see there is still no answer for this but I managed to figure it out. Those lines are appearing because you are seeing the color of the table through the "cracks". By matching the table's background-color attribute these lines go away.