Using border-spacing in table layout

[K-404]

Hello, I have a problem with Vue Draggable when using border-spacing on a table layout. When I drag an item from the list, the whole table appears to be resizing and thus pushing content below it.

<div class="bar-table-list">
        <div class="bar-table-list-head"></div>
        <draggable
            class="bar-table-list-body draggable-wrapper"
            draggable=".addon"
            handle=".bar-table-list-drag"
            :list="group"
            :animation="500"
            :force-fallback="true"
            @start="reorderStart(group)"
            @end="reorderEnd(group)">
            <div v-for="addon in group" :key="addon.id" class="bar-table-list-row addon">
                <div class="bar-table-list-col bar-table-list-drag">
                    <svg>
                        <use xlink:href="#drag-indicator" />
                    </svg>
                </div>

.bar-table-list {
    display: table;
    width: 100%;
    border-collapse: separate;
    white-space: nowrap;
    border-spacing: 0 8px;
    margin-bottom: 8px;
}

.bar-table-list-body {
    display: table-row-group;
}

.bar-table-list-row {
    display: table-row;
    position: relative;
}

.bar-table-list-col {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 16px;
}