After searching for a solution to add space between the rows in my table, I finally found the answer on Stack Overflow. The implementation seemed to work fine at first glance, but upon closer inspection, I noticed an issue depicted in the screenshot below: https://i.sstatic.net/Y3m0U.png
The problem arises right under the dark grey (even) rows where there appears to be a line with the same color as the background of the odd rows. Following that, the black from the background is displayed, which is the desired effect, then comes an odd row followed by the black background (as expected). Strangely, this 'line' only shows up after an even row and not after an odd one – something I want to eliminate entirely.
I meticulously inspected all surrounding elements of the table along with every element within it using Chrome Inspector in search of any background, padding, or related attributes without success. At one point, I resorted to disabling various properties one by one to identify the culprit, but to no avail. The mysterious line only disappears if I disable either border-spacing or border-collapse, but doing so removes the space separating the rows, placing me back at square one.
I would greatly appreciate some assistance with this issue since I've already spent far more time than intended on such a seemingly trivial matter.
Below is the code snippet of the component:
// JavaScript code goes here...Additionally, here are the pertinent theme settings:
// Theme-related code here...