How to set grid border color ?

[Ben Junior]

Hi,

I need to add a gap between the rows as well as at the start and end of each row. Additionally, I want to change the background color of these gaps. The code below creates gaps, but it also affects the spacing between cells (which I don't want), and the gap color does not change as expected. How can I achieve this correctly?

   /* Target the table inside the grid to create spacing */

    .e-grid .e-gridcontent table {

       border-collapse: separate;

       border-spacing: 30px; /* Creates a 30px gap between rows */

       border-color: aqua !important; /* The color of the gaps */

   }

[Sanjay Kumar Suresh]

Hi Ben Junior,

Upon reviewing your query, we noticed that you have used a single value for border-spacing (e.g., 30px). When a single value is provided, it applies both horizontal and vertical spacing between table cells. This is why the spacing is affecting both rows and columns. To apply custom colors for the gaps between cells, you can achieve as like below.

Concern Code Snippet:

<style>

    .custom-grid .e-gridcontent table {

        border-collapse: separate;

        border-spacing: 0 30px; /* 0 horizontal gap, 30px vertical gap */

        background-color: aqua; /* sets the gap color */

    }

 

    .custom-grid .e-gridcontent td,

    .custom-grid .e-gridcontent th {

        background-color: white; /* override the gap color for cells */

    }

</style>

Playground Sample:

https://blazorplayground.syncfusion.com/embed/hXryXrVIqFwrvzTD?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If you need further customization or assistance, please let us know. We’ll be happy to help!

Regards,

Sanjay Kumar Suresh

[Ben Junior]

Perfect! Thanks so much.

[Sanjay Kumar Suresh]

Hi Ben Junior,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh