CODEWITHSUNDEEP
cssangularbootstrap-4ngx-datatableborder-spacing
Dennis R
Dennis R

Reputation: 3237

Row spacing for table rows

I would like to have rows in a table to have disconnected look similar to one attached below. I tried the below code by using CSS border property but I want to increate the vertical space between each rows with a thin border and give a sharp border edges.

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

Here is the Stackblitz demo page

enter image description here

Upvotes: 1

Views: 5508

Answers (1)

Matt Saunders
Matt Saunders

Reputation: 4074

Removing the CSS from .datatable-body-row and applying the CSS below to .datatable-row-center should achieve the style you are looking for:

.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);
}

The top and bottom margin can be adjusted depending on how much of a gap you want between each row, but I would recommend they be equal, if possible.

RE, dark blue border on selection, oddly this comes from the background colour of the parent cell, rather than an actual border. The following should remove it:

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

RE left and right borders, do you see them here? Looks like the image below to me so I'm not sure why they're not showing up - if not could you add a screengrab? I did add some left and right margin and remove the box shadow from the table container to make the left and right borders on each row more apparent.

In all, I added the following new 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;
    }
}

enter image description here

Upvotes: 2

Related Questions