Интервал между строками таблицы

Question

Я бы хотел, чтобы строки в таблице были отключены и выглядели так, как показано ниже.Я попробовал приведенный ниже код с помощью свойства CSS border, но я хочу увеличить вертикальное пространство между строками с тонкой рамкой и задать острые края границы.

.datatable-body-row {
    border: 4px double $light-gray-600;
    border-top: none;
}

Вот здесь Stackblitz демонстрационная страница

Answer 1

Удаление CSS из .datatable-body-row и применение нижеследующего CSS к .datatable-row-center должно обеспечить стиль, который вы ищете:

.datatable-row-center {
    border-style:solid;
    border-width: 1px;
    border-color:#ccc;
    margin-top:1px;
    margin-bottom:1px;
}

.datatable-row-wrapper:hover .datatable-row-center {
    border-color: rgb(104, 152, 241);
}

Верхнее и нижнее поле может бытькорректируется в зависимости от того, сколько разрыва вы хотите между каждой строкой, но я бы порекомендовал, чтобы они были равны, если это возможно.

RE, синяя граница при выделении, как ни странно, это происходит из-за цвета фона родительской ячейки, а не фактическая граница.Следующее должно удалить его:

.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
    {
        background: none;
    }

RE левая и правая границы, вы видите их здесь ?Похоже, что изображение ниже для меня, поэтому я не уверен, почему они не появляются - если нет, не могли бы вы добавить скриншот?Я добавил немного левого и правого поля и удалил тень от контейнера таблицы, чтобы сделать левую и правую границы каждой строки более заметными.

В целом, я добавил следующий новый CSS:

.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
    {
        background: none;
    }

.data-container {
    margin-left: 24px;
    margin-right: 24px;
}

.data-container {
    .ngx-datatable.scroll-vertical {
        height: calc(100vh - 10px);
        width: $collection-list-table-width;
        box-shadow:none;
    }
}