I am currently utilizing vue's v-if feature to dynamically display and hide table elements. I have implemented zebra backgrounds for these elements, but encounter an issue when showing a row - the background colors change due to the varying number of elements in the table. This inconsistency can be confusing visually, so my preference is to maintain consistent zebra coloring by not allowing hidden rows to impact the formatting.
Below is the CSS code snippet used to highlight every other tr element:
.content-table {
.table-content {
table {
tbody {
tr:nth-child(even) {
background-color: #00ff0d;
}
}
}
}
}
Additionally, here is a simplified example of the code structure I am working with:
<tbody>
<template v-for="item in list">
<tr class="zebra">
//blah
</tr>
<tr v-if="item.accordion">
//blah
</tr>
</template>
</tbody>
The default value for the accordion property of each item is false, thus expanding will reveal the new row and alter the background color of all subsequent items in the table.
Although I am aware of using CSS's .zebra:nth-of-type(even) selector from similar examples, it seems unsuitable for my specific code scenario as it counts all tr elements within the same parent class. Any suggestions or guidance on how to resolve this issue would be greatly appreciated.
Thank you