Стили таблиц при выводе в VUE

Question

Всем привет, не могу понят/разобраться с применением стилей, когда таблица выводится в цикле VUE

Что за черные линии, какое-то задвоение, в браузерах попробовал в 3-х, при исследовании не видно причины.

Вот код вывода

    <table>
        <thead>
        <tr>
            <td>Наименование</td>
            <td>Цена</td>
            <td></td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in data" :key="item.id">
            <td>
                <router-link :to="{name: 'materials', params:{id: item.id} }">{{item.name}}</router-link>
            </td>
            <td>{{item.price}}</td>
            <td><a @click.prevent="deleteMaterial(item.id)" href="#">Удалить</a></td>
        </tr>

        </tbody>

Вот стили

<style scoped>
    table{

         border-spacing: 0px; /*расстояние между ячейками*/
        border-collapse: collapse;/*  предотвращает задвоение рамок*/
    }

    table tr td {
        border: 1px solid  black;
    }
</style>

Скрин ihdex.html

Кто знает подскажите в чем загвоздка.

Проблема вот в чем, я работаю на 2-х экранах на основном глюк на втором все ок, я в шоке, кто знает

Answer 1

У меня получилось воспроизвести эффект на следующих стилях:

table th, table td {
    border: 1.2px solid black;
    height: 29.5px;
}

Проверь, что нигде не подцепляется левый файл стиля, задающий не целую толщину ячейки.

БЛОГ НА HUSL

Стили таблиц при выводе в VUE

Ответы (1 шт):