Here is a simple example of table markup:
<div class="table">
<div class="table__headers"></div>
<div class="table__row"></div>
<div class="table__row"></div>
</div>
The CSS styling for this table looks like this:
<style lang="scss" scoped>
.grid {
display: grid;
grid-gap: 0.5rem;
}
.table {
&__headers,
&__row {
@extend .grid;
padding: 0.5rem 0.75rem;
:first-child {
text-align: start;
}
:last-child {
text-align: end;
}
p {
font-size: 0.8rem;
font-weight: bold;
text-align: center;
margin: 0;
}
}
&__row {
background: #f8f8fa;
}
}
</style>
The challenge faced is with targeting the first and last table__row elements for unique styling.
Unfortunately, using :first-of-type does not work as expected, while :last-of-type does. Any assistance on this issue would be greatly appreciated!
Thank you,